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';

export const labelNames = [
	{
		nameOne: 'Down Payment Received',
		nameTwo: 'Deposit Received'
	},
	{
		nameOne: 'Project Started',
		nameTwo: 'Order Made'
	},
	{
		nameOne: 'Project Completed',
		nameTwo: 'Stock Received'
	},
	{
		nameOne: 'Creditors Paid',
		nameTwo: 'Creditors Paid'
	},
	{
		nameOne: 'Cash Banked',
		nameTwo: 'Cash Banked'
	}
];

const CashFlowMetricTable2: React.FC = (): JSX.Element => {
	const cashFlowContext: CashFlowMetricModel = useContext(CashFlowMetricContext);
	const companyType: string | null = localStorage.getItem('companyType');

	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}>
				<div className={styles.tableTitle}>
					<p />
					<p>
						{cashFlowContext.secondMonth} {cashFlowContext.secondYear}
					</p>
					<p>
						{cashFlowContext.thirdMonth} {cashFlowContext.thirdYear}
					</p>
				</div>
				<div className={styles.tableHead}>
					<p>Your Working Capital Timeline</p>
					<p />
					<p />
				</div>
				<div className={styles.inputContainer}>
					<label className={styles.labelClass} htmlFor="stockArrived">
						{companyType === 'All Other' ? labelNames[0].nameOne : labelNames[0].nameTwo}
					</label>

					<p className={styles.netCashFlow}>days</p>
					<p className={styles.netCashFlow}>{-1 * +cashFlowContext.deferredRevenueDays}</p>
					<p className={styles.ebit}>{cashFlowContext.deferredRevenueDaysSecond}</p>
				</div>
				<div className={styles.inputContainer}>
					<label className={styles.labelClass} htmlFor="stockArrived2">
						{companyType === 'All Other' ? labelNames[1].nameOne : labelNames[1].nameTwo}
					</label>
					<p className={styles.netCashFlow}>days</p>
					<p className={styles.netCashFlow}>0</p>
					<p className={styles.ebit}>0</p>
				</div>
				<div className={styles.inputContainer}>
					<label className={styles.labelClass} htmlFor="creditorsPayed">
						{companyType === 'All Other' ? labelNames[2].nameOne : labelNames[2].nameTwo}
					</label>
					<p className={styles.netCashFlow}>days</p>
					<p className={styles.netCashFlow}>{Math.round(+cashFlowContext.wipDaysFirst)}</p>
					<p className={styles.ebit}>{Math.round(+cashFlowContext.wipDaysSecond)}</p>
				</div>
				<div className={styles.inputContainer}>
					<label className={styles.labelClass} htmlFor="cashBanked">
						{companyType === 'All Other' ? labelNames[3].nameOne : labelNames[3].nameTwo}
					</label>
					<p className={styles.netCashFlow}>days</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="businessCashCycle">
						{companyType === 'All Other' ? labelNames[4].nameOne : labelNames[4].nameTwo}
					</label>
					<p className={styles.netCashFlow}>days</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.inputContainerWorkingCapitalDays}>
					<label className={styles.labelClass} htmlFor="businessCashCycle">
						Your business cash cycle (days)
					</label>
					<p className={styles.netCashFlow} />
					<p className={styles.netCashFlow}>{Math.round(+cashFlowContext.workingCapitalDays)}</p>
					<p className={styles.ebit}>{cashFlowContext.workingCapitalDaysSecond}</p>
				</div>
				{/* <div className={styles.inputContainerNote}>
				<label className={styles.labelClass} htmlFor="businessCashCycle">
					Change in capital required as a result of change in business cycle days
				</label>
				<p className={styles.netCashFlow}>
					{(
						+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays
					).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={styles.ebit}>
					{(
						(+cashFlowContext.workingCapitalSecond / +cashFlowContext.workingCapitalDaysSecond) *
						(+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays)
					).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
			</div> */}
			</div>
			<div className={styles.inputContainerNote}>
				<label className={styles.labelClass} htmlFor="businessCashCycle">
					Change in capital required as a result of change in business cycle days
				</label>
				<p className={styles.netCashFlow}>
					{(
						+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays
					).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={styles.ebit}>
					{(
						(+cashFlowContext.workingCapitalSecond / +cashFlowContext.workingCapitalDaysSecond) *
						(+cashFlowContext.workingCapitalDaysSecond - +cashFlowContext.workingCapitalDays)
					).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
			</div>
		</>
	);
};

export default CashFlowMetricTable2;