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

import type { RootState } from '../../../ReduxState/store';
import type { FinancialsContextModel } from '../../../Store/Financials/financials-context';
import { FinancialsContext } from '../../../Store/Financials/financials-context';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';
import styles from './MoneyForCeosTable.module.scss';

type MoneyForCeosTable2Props = {
	isAnyArrowUsed: boolean;
};

const MoneyForCeosTable2: React.FC<MoneyForCeosTable2Props> = ({
	isAnyArrowUsed
}: MoneyForCeosTable2Props): JSX.Element => {
	const minimumFractionDigits = 0;
	const maximumFractionDigits = 0;
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);

	const currencyLabel = `${
		typeof selectedCompany?.currency_symbol === 'string'
			? 'GBP'
			: selectedCompany?.currency_symbol.value
	}`;

	return (
		<div className={styles.formContainer}>
			<div className={styles.tableFooterTitle}>
				<p />
				<p>Net cash flow</p>
				<p>EBIT</p>
			</div>
			<div className={styles.tableFooter2}>
				<p className={styles.tableFooter2__adjustedPosition}>
					<b>Adjusted position</b> {financialsContext.lastMonth} {financialsContext.lastYear}
				</p>
				<p>
					<b>
						{financialsContext.netCashFlowEnd.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
				<p>
					<b>
						{financialsContext.ebitEnd.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
			</div>
			{isAnyArrowUsed && (
				<div className={styles.popup}>
					Your improvement strategy adds{' '}
					{financialsContext.netCashFlowSum.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}{' '}
					in retained cash.
				</div>
			)}
		</div>
	);
};

export default MoneyForCeosTable2;