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

interface ChartDataInterface {
	name: string;
	'Equity Valuation': number;
	'Enhanced Business Value Indicator': number;
	amt: number;
}

const MoneyForBusinessChart = ({ title }: { title?: string }): JSX.Element => {
	const financialContext: FinancialsContextModel = useContext(FinancialsContext);
	const { weightedAverageEBITDA, ebitdaValue, lessTotalDebt, enhancedBusinessValueIndicator } =
		financialContext;
	const [chartWidth, setChartWidth] = useState<number>(798);
	const [chartHeight, setChartHeight] = useState<number>(507);
	const [legendHeight, setLegendHeight] = useState<number>(60);
	const chartData: ChartDataInterface[] = [
		{
			name: 'Valuation Comparison',
			'Equity Valuation': +(weightedAverageEBITDA * +ebitdaValue - lessTotalDebt).toFixed(0),
			'Enhanced Business Value Indicator': +enhancedBusinessValueIndicator.toFixed(0),
			amt: 2400
		}
	];
	useEffect(() => {
		if (document.body.offsetWidth < 1000) {
			setChartWidth(document.body.offsetWidth - document.body.offsetWidth / 3);
			setChartHeight(document.body.offsetWidth - document.body.offsetWidth / 2);
			setLegendHeight(document.body.offsetHeight - document.body.offsetHeight / 1.05);
		}
	}, []);

	return (
		<div className={styles.chartContainer}>
			{title && <h3 className={styles.title}>{title.toUpperCase()}</h3>}
			<BarChart
				className={styles.chartContainer__body}
				data={chartData}
				height={375}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={425}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis dataKey="name" interval={0} tickMargin={15} />
				<YAxis />
				<Tooltip
					cursor={{
						fill: 'var(--primary-color)56'
					}}
				/>
				<Legend height={legendHeight} verticalAlign="top" />
				<Bar dataKey="Equity Valuation" fill="#c3c3c4" />
				<Bar dataKey="Enhanced Business Value Indicator" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default MoneyForBusinessChart;