import type React from 'react';
import { useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import type { RootState } from '../../../../ReduxState/store';
import type { CashFlowPerspectiveContextModel } from '../../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import { CashFlowPerspectiveContext } from '../../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosTable.module.scss';
import CustomWidthTooltip from '../../../../Components/UI/CustomWidthTooltip/CustomWidthTooltip';
import globalStyles from '../../../../Components/GlobalStyles/globals.module.scss';
import getThreeLetterMonthName from '../../../../utils/getThreeLetterMonthName';
import {
	determinePolarityOfChange,
	decreaseIsGoodThing,
	increaseIsGoodThing
} from '../../../../utils/determinePolarityOfChange';

const CashFlowPerspectiveTable: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const minimumFractionDigits = 0;
	const maximumFractionDigits = 0;
	const perspectiveContext: CashFlowPerspectiveContextModel = useContext(
		CashFlowPerspectiveContext
	);
	const currency = localStorage.getItem('currency');
	const protocol = window.location.protocol; // e.g., "https:"
	const hostname = window.location.hostname; // e.g., "www.example.com"
	const port = window.location.port; // e.g., "3000" or ""

	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const [currencyLabel, setCurrencyLabel] = useState<string>('GBP');
	useEffect(() => {
		if (selectedCompany) {
			setCurrencyLabel(
				`${
					typeof selectedCompany?.currency_symbol === 'string'
						? 'GBP'
						: selectedCompany?.currency_symbol.value
				}`
			);
		}
	}, [selectedCompany]);

	return (
		<>
			<div className={`${styles.formContainer} ${print ? styles.print : ''}`}>
				<div className={styles.tableHeaderReturns}>
					<label className={styles.labelClass} htmlFor="otherCapital" style={{ textAlign: 'left' }}>
						<b>Capital Efficiency and Returns</b>
					</label>
					<div>
						<b>
							{getThreeLetterMonthName(perspectiveContext.secondFinancialsMonth)}{' '}
							{perspectiveContext.secondFinancialsYear}
						</b>
					</div>
					<div>
						<b>
							{getThreeLetterMonthName(perspectiveContext.thirdFinancialsMonth)}{' '}
							{perspectiveContext.thirdFinancialsYear}
						</b>
					</div>
					<div>
						<b>Change</b>
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="otherCapital" style={{ textAlign: 'left' }}>
						<CustomWidthTooltip title="Non-core capital invested outside main operations." />
						Other Capital
					</label>
					<div style={{ textAlign: 'right' }}>
						{(+perspectiveContext.otherCapitalSecondFinancial).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</div>
					<div style={{ textAlign: 'right' }}>
						{(+perspectiveContext.otherCapitalThirdFinancial).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</div>
					<div
						style={{ textAlign: 'right' }}
						className={`${decreaseIsGoodThing(
							+perspectiveContext.otherCapitalSecondFinancial,
							+perspectiveContext.otherCapitalThirdFinancial
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.otherCapitalSecondFinancial,
							+perspectiveContext.otherCapitalThirdFinancial,
							+perspectiveContext.otherCapitalChange
						).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="priceIncrease">
						<CustomWidthTooltip title="Revenue generated per unit of total assets." />
						Asset Turnover
					</label>

					<div className={styles.netCashFlow}>
						{perspectiveContext.assetsTurnoverSecondFinancial}
					</div>
					<div className={styles.netCashFlow}>
						{perspectiveContext.assetsTurnoverThirdFinancial}
					</div>
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.assetsTurnoverSecondFinancial,
							+perspectiveContext.assetsTurnoverThirdFinancial
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.assetsTurnoverSecondFinancial,
							+perspectiveContext.assetsTurnoverThirdFinancial,
							+perspectiveContext.assetsTurnoverChange
						)}{' '}
						%
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="volumeIncrease">
						<CustomWidthTooltip title="Profitability of capital invested in operations." />
						Return on Invested Capital (ROIC) %
					</label>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnCapitalFirst} %</div>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnCapitalSecond} %</div>
					{/* <div className={styles.ebit}>{perspectiveContext.returnOnCapitalChange} %</div> */}
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.returnOnCapitalFirst,
							+perspectiveContext.returnOnCapitalSecond
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.returnOnCapitalFirst,
							+perspectiveContext.returnOnCapitalSecond,
							+perspectiveContext.returnOnCapitalChange
						)}{' '}
						%
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="cogsReduction">
						<CustomWidthTooltip title="Profit earned per unit of total assets." />
						Return on Total Assets (ROA)
					</label>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnTotalAssetsFirst} %</div>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnTotalAssetsSecond} %</div>
					{/* <div className={styles.ebit}>{perspectiveContext.returnOnTotalAssetsChange} %</div> */}
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.returnOnTotalAssetsFirst,
							+perspectiveContext.returnOnTotalAssetsSecond
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.returnOnTotalAssetsFirst,
							+perspectiveContext.returnOnTotalAssetsSecond,
							+perspectiveContext.returnOnTotalAssetsChange
						)}{' '}
						%
					</div>
				</div>
				<div className={`${styles.rowEmphasis} ${styles.valueContainer}`}>
					<label className={styles.labelClass} htmlFor="overheadReduction">
						<CustomWidthTooltip title="Profit generated for each unit of shareholder equity." />
						Return on Equity (ROE)
					</label>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnEquityFirst} %</div>
					<div className={styles.netCashFlow}>{perspectiveContext.returnOnEquitySecond} %</div>
					{/* <div className={styles.ebit}>{perspectiveContext.returnOnEquityChange} %</div> */}
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.returnOnEquityFirst,
							+perspectiveContext.returnOnEquitySecond
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.returnOnEquityFirst,
							+perspectiveContext.returnOnEquitySecond,
							+perspectiveContext.returnOnEquityChange
						)}{' '}
						%
					</div>
				</div>
			</div>
			<div className={`${styles.formContainer} ${print ? styles.print : ''}`}>
				<div className={styles.tableHeaderReturns}>
					<label className={styles.labelClass} htmlFor="otherCapital" style={{ textAlign: 'left' }}>
						<b>Capital Base and Profitability</b>
					</label>
					<div>
						<b>
							{getThreeLetterMonthName(perspectiveContext.secondFinancialsMonth)}{' '}
							{perspectiveContext.secondFinancialsYear}
						</b>
					</div>
					<div>
						<b>
							{getThreeLetterMonthName(perspectiveContext.thirdFinancialsMonth)}{' '}
							{perspectiveContext.thirdFinancialsYear}
						</b>
					</div>
					<div>
						<b>Change</b>
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="deptorsDayReductions">
						<CustomWidthTooltip title="Operating assets minus operating liabilities." />
						Net Operating Assets
					</label>
					<div className={styles.netCashFlow}>
						{currency}{' '}
						{parseFloat(perspectiveContext.netOperatingAssetsFirst).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
					<div className={styles.netCashFlow}>
						{currency}{' '}
						{parseFloat(perspectiveContext.netOperatingAssetsSecond).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
					{/* <div className={styles.ebit}>{perspectiveContext.netOperatingAssetsChange} %</div> */}
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.netOperatingAssetsFirst,
							+perspectiveContext.netOperatingAssetsSecond
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.netOperatingAssetsFirst,
							+perspectiveContext.netOperatingAssetsSecond,
							+perspectiveContext.netOperatingAssetsChange
						)}{' '}
						%
					</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="reductionInWipDays">
						<CustomWidthTooltip title="Profit earned before tax is deducted." />
						Net Profit (pre-tax)
					</label>
					<div className={styles.netCashFlow}>
						{currency}{' '}
						{parseFloat(perspectiveContext.netProfitPreTaxFirst).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
					<div className={styles.netCashFlow}>
						{currency}{' '}
						{parseFloat(perspectiveContext.netProfitPreTaxSecond).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
					{/* <div className={styles.ebit}>{perspectiveContext.netProfitPreTaxChange} %</div> */}
					<div
						className={`${styles.ebit} ${increaseIsGoodThing(
							+perspectiveContext.netProfitPreTaxFirst,
							+perspectiveContext.netProfitPreTaxSecond
						)}`}
					>
						{determinePolarityOfChange(
							+perspectiveContext.netProfitPreTaxFirst,
							+perspectiveContext.netProfitPreTaxSecond,
							+perspectiveContext.netProfitPreTaxChange
						)}{' '}
						%
					</div>
				</div>
				<div style={{ fontSize: '0.925rem', marginTop: '10px' }}>
					💡 <b>Investor lens</b>: Sustained ROIC above cost of capital = genuine value creation,
					not just growth.
				</div>
				<div className={styles.formulaImage} style={{ paddingTop: '30px' }}>
					<h3 className={globalStyles.subtitle}>Return on Invested Capital</h3>
					<img
						src={`${protocol}//${hostname}${port ? `:${port}` : ''}/calcFormula.jpg`}
						alt="explanation of the formula used"
						style={{ marginTop: '30px' }}
					/>
				</div>
				<div className={`${styles.valueContainer} ${styles.borderTop}`}>
					<label className={styles.labelClass} htmlFor="increaseInCreditorsDays">
						{/* <CustomWidthTooltip title="" /> */}
						Return on Capital
					</label>
					<div className={styles.netCashFlow} />
					<div className={styles.netCashFlow} />
					<div className={styles.ebit}>{perspectiveContext.returnOnCapitalSecond} %</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="increaseInCreditorsDays">
						{/* <CustomWidthTooltip title="" /> */}
						Net-profit (pre-tax) Change
					</label>
					<div className={styles.netCashFlow} />
					<div className={styles.netCashFlow} />
					<div className={styles.ebit}>{perspectiveContext.netProfitPreTaxChange} %</div>
				</div>
				<div className={styles.valueContainer}>
					<label className={styles.labelClass} htmlFor="increaseInCreditorsDays">
						{/* <CustomWidthTooltip title="" /> */}
						NET Operating Assets Change
					</label>
					<div className={styles.netCashFlow} />
					<div className={styles.netCashFlow} />
					<div className={styles.ebit}>{perspectiveContext.netOperatingAssetsChange} %</div>
				</div>
			</div>
		</>
	);
};

export default CashFlowPerspectiveTable;