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

import type { FinancialsContextModel } from '../../../../Store/Financials/financials-context';
import { FinancialsContext } from '../../../../Store/Financials/financials-context';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosChart.module.scss';
import globalStyle from '../../../../Components/GlobalStyles/globals.module.scss';

const MoneyMultiplierEffectOnNetCashFlowAndEbitChart = (): JSX.Element => {
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	return (
		<div>
			<h3 className={globalStyle.title}>Money Multiplier effect on Net Cash Flow and EBIT</h3>
			<BarChart
				className={styles.chartContainer__body}
				data={[
					{
						name: 'Net Cash flow',
						firstYear: financialsContext.netCashFlow,
						secondYear: financialsContext.netCashFlowEnd,
						amt: financialsContext.netCashFlowEnd
					},
					{
						name: 'EBIT',
						firstYear: financialsContext.ebit,
						secondYear: financialsContext.ebitEnd,
						amt: financialsContext.ebitEnd
					}
				]}
				height={375}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={425}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis dataKey="name" interval={0} tickMargin={15} tick={{ fontSize: 12, fill: '#000' }} />
				<YAxis tick={{ fontSize: 12, fill: '#000' }} />
				<Tooltip
					cursor={{
						// fill: 'var(--primary-color)56'
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={80} verticalAlign="top" />
				<Bar dataKey="firstYear" name="Your current position" fill="var(--cc-primary)" />
				<Bar dataKey="secondYear" name="Your adjusted position" fill="var(--cc-blue-dark)" />
			</BarChart>
		</div>
	);
};

export default MoneyMultiplierEffectOnNetCashFlowAndEbitChart;