import { useContext, useEffect, useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

import type { CashFlowMetricModel } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import { CashFlowMetricContext } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosChart.module.scss';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import findMinMaxAndTicksForRecharts from '../../../../utils/findMinMaxAndTicksForRecharts';

const CashFlowMetricChart2: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const cashFlowContext: CashFlowMetricModel = useContext(CashFlowMetricContext);
	const [chartWidth, setChartWidth] = useState<number>(798);
	const [chartHeight, setChartHeight] = useState<number>(507);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);

	useEffect(() => {
		if (print) {
			setChartWidth(425);
			setChartHeight(375);
		} else if (document.body.offsetWidth < 1000) {
			setChartWidth(document.body.offsetWidth * 0.8);
			setChartHeight(chartHeight * 0.8);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

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

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

	const { minY, maxY, ticks } = findMinMaxAndTicksForRecharts([
		+cashFlowContext.grossMarginForNextPoundSale,
		+cashFlowContext.workingCapitalPercent,
		+cashFlowContext.grossMarginForNextPoundSaleSecond,
		+cashFlowContext.workingCapitalPercentSecond
	]);

	console.log('TICKS', ticks);

	return (
		<div className={styles.chartContainer}>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: `Year ${secondFinancial ? secondFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Gross Margin %': cashFlowContext.grossMarginForNextPoundSale,
						'Working Capital (% of Revenue)': cashFlowContext.workingCapitalPercent
					},
					{
						name: `Year ${thirdFinancial ? thirdFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Gross Margin %': cashFlowContext.grossMarginForNextPoundSaleSecond,
						'Working Capital (% of Revenue)': cashFlowContext.workingCapitalPercentSecond
					}
				]}
				height={chartHeight}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={chartWidth}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis dataKey="name" interval={0} tickMargin={15} />
				<YAxis domain={[minY, maxY]} ticks={ticks} />
				<Tooltip
					cursor={{
						// fill: 'var(--primary-color)56'
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={80} verticalAlign="top" />
				<Bar dataKey="Gross Margin %" fill="#1e8f39" />
				<Bar dataKey="Working Capital (% of Revenue)" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default CashFlowMetricChart2;