// It would seem that this is just a copy of Revenuew Growth vs Direct Costs Growth Chart
// instead this content would be replaced by Direct Labour Efficiency Ratio Chart by Dejan on 13.03.2025
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';

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';
import { useSelector } from 'react-redux';
import { RootState } from '../../../../ReduxState/store';

const DirectLaborEfficiencyRatioChart = (): 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 {
		calculatedOverheadsGrowthFirst,
		calculatedOverheadsGrowthSecond,
		calculatedRevenueGrowthSecondFinancial,
		calculatedRevenueGrowthThirdFinancial
	} = cashFlowProfitabilityCalculator(
		selectedFinancials[0],
		selectedFinancials[1],
		selectedFinancials[2]
	);

	return (
		<div>
			<h3 className={styles.title}>Direct Labor Efficiency Rating</h3>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: 'Revenue Growth',
						amt: 100,
						'Revenue Growth': calculatedRevenueGrowthSecondFinancial.toFixed(2),
						'Overheads Growth': calculatedOverheadsGrowthFirst.toFixed(2)
					},
					{
						name: 'Overheads Growth',
						amt: 100,
						'Revenue Growth': calculatedRevenueGrowthThirdFinancial.toFixed(2),
						'Overheads Growth': calculatedOverheadsGrowthSecond.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="Overheads Growth" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default DirectLaborEfficiencyRatioChart;