import { useSelector } from 'react-redux';
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';

import type { RootState } from '../../../../ReduxState/store';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import globalStyle from '../../../../Components/GlobalStyles/globals.module.scss';

const DirectLaborEfficiencyRatioChart = (props: { embed?: boolean }): 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 calculatedLerFirst = secondFinancial
		? (+secondFinancial.input['Gross Profit'] / +secondFinancial.input['Direct Labour']).toFixed(2)
		: 0;
	const calculatedLerSecond = thirdFinancial
		? (+thirdFinancial.input['Gross Profit'] / +thirdFinancial.input['Direct Labour']).toFixed(2)
		: 0;

	console.log('calculatedLerFirst', calculatedLerFirst);
	console.log('calculatedLerSecond', calculatedLerSecond);
	const maxValue = Math.max(
		typeof calculatedLerFirst === 'string' ? parseFloat(calculatedLerFirst) : calculatedLerFirst,
		typeof calculatedLerSecond === 'string' ? parseFloat(calculatedLerSecond) : calculatedLerSecond
	);
	const yAxisMax = Math.ceil(maxValue * 1.25);

	return (
		<div style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
			{props.embed ? '' : <h3 className={globalStyle.subtitle}>Direct Labour Productivity</h3>}
			<div
				style={!props.embed ? { margin: '0 auto' } : { marginLeft: 'auto', marginRight: 'auto' }}
			>
				<LineChart
					data={[
						{
							name: secondFinancial.input['Year Ending'],
							'Direct Labour Efficiency Ratio': calculatedLerFirst,
							amt: 0.5
						},
						{
							name: thirdFinancial.input['Year Ending'],
							'Direct Labour Efficiency Ratio': calculatedLerSecond,
							amt: 10
						}
					]}
					height={!props.embed ? 220 : 340}
					width={!props.embed ? 420 : 725}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis
						dataKey="name"
						padding={{
							left: 30,
							right: 30
						}}
					/>
					<YAxis domain={[0, yAxisMax]} />
					<Tooltip />
					<Line dataKey="Direct Labour Efficiency Ratio" stroke="#82ca9d" type="monotone" />
				</LineChart>
			</div>
		</div>
	);
};

export default DirectLaborEfficiencyRatioChart;