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

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

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

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

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

	const { minY, maxY, ticks } = findMinMaxAndTicksForRecharts([
		calculatedRevenueGrowthSecondFinancial,
		calculatedCogsGrowthFirst,
		calculatedRevenueGrowthThirdFinancial,
		calculatedCogsGrowthSecond
	]);

	return (
		<div
			style={{ position: 'relative', maxWidth: mode === 'default' ? 450 : 800, margin: '0 auto' }}
		>
			<h3 className={`${globalStyles.subtitle} mt-3`}>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={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' ? 12 : 14, fill: '#000' }}
				/>
				<YAxis domain={[minY, maxY]} ticks={ticks} tick={{ fontSize: 12, fill: '#000' }} />
				<Tooltip
					cursor={{
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={80} verticalAlign="top" />
				<Bar dataKey="Revenue Growth %" fill="var(--cc-cool-gray)" />
				<Bar dataKey="CoGS Growth %" fill="var(--cc-rainbow-turqoise-dark)" />
			</BarChart>
		</div>
	);
};

export default RevenueVsDirectCostGrowthChart;