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';
import globalStyle from '../../../../Components/GlobalStyles/globals.module.scss';
import findMinMaxAndTicksForRecharts from '../../../../utils/findMinMaxAndTicksForRecharts';

const ProfitabilityTrendsChart = ({ mode = 'default' }): JSX.Element => {
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);

	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))
	// );

	const { minY, maxY, ticks } = findMinMaxAndTicksForRecharts([
		calculatedGrossMarginFirst,
		calculatedGrossMarginSecond,
		calculatedEbitPercentOfRevenueFirst,
		calculatedEbitPercentOfRevenueSecond,
		calculatedNetProfitBeforeTaxOfRevenueFirst,
		calculatedNetProfitBeforeTaxOfRevenueSecond
	]);

	return (
		<div
			style={{ position: 'relative', maxWidth: mode === 'default' ? 450 : 800, margin: '0 auto' }}
		>
			<h3 className={globalStyle.subtitle}>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={mode === 'default' ? 375 : 545}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={mode === 'default' ? 425 : 765}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis
					dataKey="name"
					interval={0}
					tickMargin={15}
					tick={{ fontSize: mode === 'default' ? 8 : 14, fill: '#000' }}
				/>
				<YAxis
					domain={[minY, maxY]}
					ticks={ticks}
					tick={{ fontSize: mode === 'default' ? 12 : 14, fill: '#000' }}
				/>
				<Tooltip
					// position={{ y: 0, x: 0 }}
					cursor={{
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={80} verticalAlign="top" />
				<Bar
					dataKey="Ending Year First Selected Financial"
					name={`YE${selectedFinancials[1].input['Year Ending']}`}
					fill="var(--cc-cool-gray)"
				/>
				<Bar
					dataKey="Ending Year Second Selected Financial"
					name={`YE${selectedFinancials[2].input['Year Ending']}`}
					fill="var(--cc-blue-dark)"
				/>
			</BarChart>
		</div>
	);
};

export default ProfitabilityTrendsChart;