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';
import globalStyles from '../../../Components/GlobalStyles/globals.module.scss';

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

const MoneyForBusinessChart = ({
	title,
	width = 'narrow'
}: {
	title?: string;
	width?: 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={globalStyles.title}
					style={
						width === 'wide' ? { padding: '20px 0' } : { padding: '20px 0', maxWidth: '310px' }
					}
				>
					{title}
				</h3>
			)}
			<BarChart
				className={styles.chartContainer__body}
				data={chartData}
				height={375}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={width === 'narrow' ? 425 : 800}
			>
				<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="Equity Valuation" fill="#c3c3c4" />
				<Bar dataKey="Enhanced Business Value Indicator" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default MoneyForBusinessChart;