import { useContext, useEffect, useState } from 'react';
import { XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar, BarChart } 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 { cashFlowProfitabilityCalculator } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/cahs-flow-analysis-context-helper';
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';
// import type { SixthChartDataInterface } from '../../../MoneyForCeosBusiness/Components/MoneyForBusiness.helper';

// interface BusinessChart {
// 	data: SixthChartDataInterface[];
// }

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

	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) return <></>;
	const {
		calculatedNetProfitBeforeTaxOfRevenueFirst,
		calculatedNetProfitBeforeTaxOfRevenueSecond
	} = cashFlowProfitabilityCalculator(
		selectedFinancials[0],
		selectedFinancials[1],
		selectedFinancials[2]
	);

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

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

	return (
		<div className={styles.chartContainer}>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: `Year ${secondFinancial ? secondFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Net Profit (pre-tax) % of Revenue':
							calculatedNetProfitBeforeTaxOfRevenueFirst.toFixed(2),
						'Working Capital (% of Revenue)': cashFlowContext.workingCapitalPercent
					},
					{
						name: `Year ${thirdFinancial ? thirdFinancial.input['Year Ending'] : 'January'}`,
						amt: 100,
						'Net Profit (pre-tax) % of Revenue':
							calculatedNetProfitBeforeTaxOfRevenueSecond.toFixed(2),
						'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} tick={{ fontSize: 12, fill: '#000' }} />
				<Tooltip
					cursor={{
						// fill: 'var(--primary-color)56'
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={60} verticalAlign="top" />
				<Bar dataKey="Net Profit (pre-tax) % of Revenue" fill="#4f87ff" />
				<Bar dataKey="Working Capital (% of Revenue)" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default CashFlowMetricChart3;