import { useContext } 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';

const CashFlowMetricChart = (): JSX.Element => {
	const cashFlowMetricContext: CashFlowMetricModel = useContext(CashFlowMetricContext);
	console.log('I AM IN CASHFLOWMETRICCHART');
	return (
		<div className={styles.chartContainerFirst}>
			<div>
				<p className={styles.chartContainerFirst__paragraph1}>
					Year {cashFlowMetricContext.secondYear}
				</p>
				<BarChart
					data={[
						{
							name: 'Working Capital Days',
							'Debtors Days': cashFlowMetricContext.debtorsDay,
							'WIP Days': cashFlowMetricContext.wipDaysFirst,
							'Deferred Revenue Days': cashFlowMetricContext.deferredRevenueDays,
							'Creditors Days': cashFlowMetricContext.creditorsDay,
							'Working Capital Days': (
								+cashFlowMetricContext.debtorsDaySecond +
								+cashFlowMetricContext.wipDaysSecond -
								+cashFlowMetricContext.deferredRevenueDaysSecond -
								+cashFlowMetricContext.creditorsDaySecond
							).toFixed(2)
						}
					]}
					height={100}
					margin={{
						top: 20,
						right: 0,
						left: 10,
						bottom: 5
					}}
					width={750}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="name" />
					<YAxis />
					<Tooltip />
					<Legend />
					<Bar dataKey="Debtors Days" fill="#20CB48FF" stackId="a" />
					<Bar dataKey="WIP Days" fill="#2064CBFF" stackId="a" />
					<Bar dataKey="Deferred Revenue Days" fill="#7820CBFF" stackId="a" />
					<Bar dataKey="Creditors Days" fill="#CB2053FF" stackId="a" />
					<Bar dataKey="Working Capital Days" fill="#CB2053FF" stackId="a" />
				</BarChart>
			</div>
			<div>
				<p className={styles.chartContainerFirst__paragraph2}>
					Year {cashFlowMetricContext.thirdYear}
				</p>
				<BarChart
					data={[
						{
							name: 'Working Capital Days',
							'Debtors Days': cashFlowMetricContext.debtorsDaySecond,
							'WIP Days': cashFlowMetricContext.wipDaysSecond,
							'Deferred Revenue Days': cashFlowMetricContext.deferredRevenueDaysSecond,
							'Creditors Days': cashFlowMetricContext.creditorsDaySecond,
							'Working Capital Days': (
								+cashFlowMetricContext.debtorsDaySecond +
								+cashFlowMetricContext.wipDaysSecond -
								+cashFlowMetricContext.deferredRevenueDaysSecond -
								+cashFlowMetricContext.creditorsDaySecond
							).toFixed(2)
						}
					]}
					height={100}
					margin={{
						top: 20,
						right: 0,
						left: 10,
						bottom: 5
					}}
					width={750}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="name" />
					<YAxis />
					<Tooltip />
					<Legend />
					<Bar dataKey="Debtors Days" fill="#20CB48FF" stackId="a" />
					<Bar dataKey="WIP Days" fill="#2064CBFF" stackId="a" />
					<Bar dataKey="Deferred Revenue Days" fill="#7820CBFF" stackId="a" />
					<Bar dataKey="Creditors Days" fill="#CB2053FF" stackId="a" />
					<Bar dataKey="Working Capital Days" fill="#CB2053FF" stackId="a" />
				</BarChart>
			</div>
		</div>
	);
};

export default CashFlowMetricChart;