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

import type { RootState } from '../../../../ReduxState/store';
import type { CashFlowMetricModel } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import { CashFlowMetricContext } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosTable.module.scss';
import getCompanyType from '../../../../utils/getCompanyType';
import getThreeLetterMonthName from '../../../../utils/getThreeLetterMonthName';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';

export const labelNames = {
	allOther: {
		labelOne: 'Stock Arrived',
		labelTwo: 'Stock Sold',
		labelThree: 'Creditors Paid',
		labelFour: 'Cash Banked'
	},
	service: {
		labelOne: 'Project Start',
		labelTwo: 'Project End',
		labelThree: 'Creditors Paid',
		labelFour: 'Cash Banked'
	}
};

const CashFlowMetricTable2: React.FC = (): JSX.Element => {
	const cashFlowContext: CashFlowMetricModel = useContext(CashFlowMetricContext);

	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.financialsList
	);
	const thirdSelectedFinancial = selectedFinancials!?.slice(-1)[0];
	const [currencyLabel, setCurrencyLabel] = useState<string>('GBP');
	const companyType: string | null = getCompanyType(selectedCompany);

	useEffect(() => {
		if (selectedCompany) {
			setCurrencyLabel(
				`${
					typeof selectedCompany?.currency_symbol === 'string'
						? 'GBP'
						: selectedCompany?.currency_symbol.value
				}`
			);
		}
	}, [selectedCompany]);

	if (!thirdSelectedFinancial) {
		return <></>;
	}

	return (
		<>
			{companyType === 'All Other' && (
				<div className={styles.formContainer}>
					<div className={styles.tableHead}>
						<p>
							<b>Your Working Capital Timeline</b>
						</p>
						<p>
							<b>
								{getThreeLetterMonthName(cashFlowContext.secondMonth)} {cashFlowContext.secondYear}
							</b>
						</p>
						<p>
							<b>
								{getThreeLetterMonthName(cashFlowContext.thirdMonth)} {cashFlowContext.thirdYear}
							</b>
						</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="stockArrived">
							{labelNames.allOther.labelOne}
						</label>

						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>0</p>
						<p className={styles.ebit}>0</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="stockArrived2">
							{labelNames.allOther.labelTwo}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>{Math.ceil(+cashFlowContext.wipDaysFirst)}</p>
						<p className={styles.ebit}>{Math.ceil(+cashFlowContext.wipDaysSecond)}</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="creditorsPayed">
							{labelNames.allOther.labelThree}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>{Math.ceil(+cashFlowContext.creditorsDay)}</p>
						<p className={styles.ebit}>{Math.ceil(+cashFlowContext.creditorsDaySecond)}</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="cashBanked">
							{labelNames.allOther.labelFour}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>
							{Math.round(
								+cashFlowContext.debtorsDay +
									+cashFlowContext.wipDaysFirst -
									+cashFlowContext.deferredRevenueDays
							)}
						</p>
						<p className={styles.ebit}>
							{Math.round(
								+cashFlowContext.debtorsDaySecond +
									+cashFlowContext.wipDaysSecond -
									+cashFlowContext.deferredRevenueDaysSecond
							)}
						</p>
					</div>

					<div className={styles.inputContainerWorkingCapitalTimeline}>
						<label className={styles.labelClass} htmlFor="businessCashCycle">
							<b>Your Business Cash Cycle (Days)</b>
						</label>
						<p className={styles.netCashFlow} />
						<p className={styles.netCashFlow}>
							<b>{Math.round(+cashFlowContext.workingCapitalDays)}</b>
						</p>
						<p className={styles.ebit}>
							<b>{Math.round(+cashFlowContext.workingCapitalDaysSecond)}</b>
						</p>
					</div>
					<div style={{ fontSize: '0.925rem', marginTop: '10px' }}>
						💡 <b>Tip</b>: Change in capital required as a result of change in business cycle days
						is{' '}
						{/* {(
							(+cashFlowContext.workingCapitalSecond / +cashFlowContext.workingCapitalDaysSecond) *
							(+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays)
						).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})} */}
						{(
							((+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays) /
								365) *
							(+thirdSelectedFinancial.input.COGS + +thirdSelectedFinancial.input['Direct Labour'])
						).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
				</div>
			)}

			{companyType !== 'All Other' && (
				<div className={styles.formContainer}>
					<div className={styles.tableTitle}>
						<p />
						<p>
							{cashFlowContext.secondMonth} {cashFlowContext.secondYear}
						</p>
						<p>
							{cashFlowContext.thirdMonth} {cashFlowContext.thirdYear}
						</p>
					</div>
					<div className={styles.tableHead}>
						<div className={styles.tableHead}>
							<p>
								<b>Your Working Capital Timeline</b>
							</p>
							<p>
								<b>
									{getThreeLetterMonthName(cashFlowContext.secondMonth)}{' '}
									{cashFlowContext.secondYear}
								</b>
							</p>
							<p>
								<b>
									{getThreeLetterMonthName(cashFlowContext.thirdMonth)} {cashFlowContext.thirdYear}
								</b>
							</p>
						</div>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="stockArrived">
							{labelNames.service.labelOne}
						</label>

						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>0</p>
						<p className={styles.ebit}>0</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="stockArrived2">
							{labelNames.service.labelTwo}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>{Math.round(+cashFlowContext.wipDaysFirst)}</p>
						<p className={styles.ebit}>{Math.round(+cashFlowContext.debtorsDaySecond)}</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="creditorsPayed">
							{labelNames.service.labelThree}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>{Math.round(+cashFlowContext.creditorsDay)}</p>
						<p className={styles.ebit}>{Math.round(+cashFlowContext.creditorsDaySecond)}</p>
					</div>
					<div className={styles.inputContainer}>
						<label className={styles.labelClass} htmlFor="cashBanked">
							{labelNames.service.labelFour}
						</label>
						<p className={styles.netCashFlow}>on day</p>
						<p className={styles.netCashFlow}>
							{Math.round(
								+cashFlowContext.debtorsDay +
									+cashFlowContext.wipDaysFirst -
									+cashFlowContext.deferredRevenueDays
							)}
						</p>
						<p className={styles.ebit}>
							{Math.round(
								+cashFlowContext.debtorsDaySecond +
									+cashFlowContext.wipDaysSecond -
									+cashFlowContext.deferredRevenueDaysSecond
							)}
						</p>
					</div>

					<div className={styles.inputContainerWorkingCapitalTimeline}>
						<label className={styles.labelClass} htmlFor="businessCashCycle">
							<b>Your Business Cash Cycle (Days)</b>
						</label>
						<p className={styles.netCashFlow} />
						<p className={styles.netCashFlow}>
							<b>{Math.round(+cashFlowContext.workingCapitalDays)}</b>
						</p>
						<p className={styles.ebit}>
							<b>{Math.round(+cashFlowContext.workingCapitalDaysSecond)}</b>
						</p>
					</div>
					<div style={{ fontSize: '0.925rem', marginTop: '10px' }}>
						💡 <b>Tip</b>: Change in capital required as a result of change in business cycle days
						is{' '}
						{/* {(
							(+cashFlowContext.workingCapitalSecond / +cashFlowContext.workingCapitalDaysSecond) *
							(+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays)
						).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})} */}
						{(
							((+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays) /
								365) *
							(+thirdSelectedFinancial.input.COGS + +thirdSelectedFinancial.input['Direct Labour'])
						).toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits: 0,
							maximumFractionDigits: 0
						})}
					</div>
				</div>
			)}

			<div className={styles.inputContainerNote} />
		</>
	);
};

export default CashFlowMetricTable2;