import { useSelector } from 'react-redux';
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';

import type { RootState } from '../../../../ReduxState/store';
import { cashFlowProfitabilityCalculator } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/cahs-flow-analysis-context-helper';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosChart.module.scss';

const RevenueVsDirectCostGrowthChart = (): JSX.Element => {
	/** NEW */
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	/** NEW end */
	// const firstFinancial: FinancialsModel = JSON.parse(
	// 	localStorage.getItem('first-financial') as string
	// );
	// const secondFinancial: FinancialsModel = JSON.parse(
	// 	localStorage.getItem('second-financial') as string
	// );
	// const thirdFinancial: FinancialsModel = JSON.parse(
	// 	localStorage.getItem('third-financial') as string
	// );

	if (!selectedFinancials || selectedFinancials.length < 3) {
		return <></>;
	}

	const firstFinancial = selectedFinancials[0];
	const secondFinancial = selectedFinancials[1];
	const thirdFinancial = selectedFinancials[2];

	const {
		calculatedRevenueGrowthSecondFinancial,
		calculatedRevenueGrowthThirdFinancial,
		calculatedCogsGrowthFirst,
		calculatedCogsGrowthSecond
	} = cashFlowProfitabilityCalculator(
		selectedFinancials[0],
		selectedFinancials[1],
		selectedFinancials[2]
	);

	return (
		<div>
			<h3 className={styles.title}>Revenue vs Direct Cost Growth</h3>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: `Year ${secondFinancial ? secondFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Revenue Growth %': calculatedRevenueGrowthSecondFinancial.toFixed(2),
						'CoGS Growth %': calculatedCogsGrowthFirst.toFixed(2)
					},
					{
						name: `Year ${thirdFinancial ? thirdFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Revenue Growth %': calculatedRevenueGrowthThirdFinancial.toFixed(2),
						'CoGS Growth %': calculatedCogsGrowthSecond.toFixed(2)
					}
				]}
				height={507}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={798}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis dataKey="name" interval={0} tickMargin={15} />
				<YAxis />
				<Tooltip
					cursor={{
						fill: 'var(--primary-color)56'
					}}
				/>
				<Legend height={60} verticalAlign="top" />
				<Bar dataKey="Revenue Growth %" fill="#c3c3c4" />
				<Bar dataKey="CoGS Growth %" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default RevenueVsDirectCostGrowthChart;