import { useSelector } from 'react-redux';
import { Bar, BarChart, CartesianGrid, LabelList, 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 ProfitabilityTrendsChart = (): JSX.Element => {
	/** NEW */
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	/** NEW end */

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

	const {
		calculatedGrossMarginFirst,
		calculatedGrossMarginSecond,
		calculatedContributionMarginFirst,
		calculatedContributionMarginSecond,
		calculatedEbitPercentOfRevenueFirst,
		calculatedEbitPercentOfRevenueSecond,
		calculatedNetProfitBeforeTaxOfRevenueFirst,
		calculatedNetProfitBeforeTaxOfRevenueSecond
	} = cashFlowProfitabilityCalculator(
		selectedFinancials[0],
		selectedFinancials[1],
		selectedFinancials[2]
	);

	const maxY = Math.max(
		...[
			calculatedGrossMarginFirst,
			calculatedGrossMarginSecond,
			calculatedEbitPercentOfRevenueFirst,
			calculatedEbitPercentOfRevenueSecond,
			calculatedNetProfitBeforeTaxOfRevenueFirst,
			calculatedNetProfitBeforeTaxOfRevenueSecond
		].map((val) => Math.round(val * 1.1))
	);

	return (
		<div>
			<h3 className={styles.title}>Profitability Trends</h3>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: 'Gross Margin %',
						amt: 100,
						'Ending Year First Selected Financial': calculatedGrossMarginFirst.toFixed(2),
						'Ending Year Second Selected Financial': calculatedGrossMarginSecond.toFixed(2)
					},
					// {
					// 	name: 'EBIT % of Revenue',
					// 	amt: 100,
					// 	'Ending Year First Selected Financial': calculatedEbitPercentOfRevenueFirst.toFixed(2),
					// 	'Ending Year Second Selected Financial': calculatedEbitPercentOfRevenueSecond.toFixed(2)
					// },
					{
						name: 'Contribution Margin %',
						amt: 100,
						'Ending Year First Selected Financial': calculatedContributionMarginFirst.toFixed(2),
						'Ending Year Second Selected Financial': calculatedContributionMarginSecond.toFixed(2)
					},
					{
						name: 'Net Profit (pre tax) % of Revenue',
						amt: 100,
						'Ending Year First Selected Financial':
							calculatedNetProfitBeforeTaxOfRevenueFirst.toFixed(2),
						'Ending Year Second Selected Financial':
							calculatedNetProfitBeforeTaxOfRevenueSecond.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 domain={[0, maxY]} />
				<Tooltip
					position={{ y: 0, x: 0 }}
					cursor={{
						fill: 'var(--primary-color)56'
					}}
				/>
				<Legend height={40} verticalAlign="top" />
				<Bar
					dataKey="Ending Year First Selected Financial"
					name={`YE${selectedFinancials[1].input['Year Ending']}`}
					fill="#c3c3c4"
				/>
				<Bar
					dataKey="Ending Year Second Selected Financial"
					name={`YE${selectedFinancials[2].input['Year Ending']}`}
					fill="var(--primary-color)"
				/>
			</BarChart>
		</div>
	);
};

export default ProfitabilityTrendsChart;