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 './MoneyForCeosChart.module.scss';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../ReduxState/store';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';
import getCompanyType from '../../../utils/getCompanyType';

interface DataInterface {
	name: string;
	'Impact on EBIT': number | string;
	'Impact on Cash Flow': number | string;
	amt: number;
}

const MoneyForCeosChart = (): JSX.Element => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const companyType = getCompanyType(selectedCompany);
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const {
		priceIncreaseEbit,
		priceIncreaseNetCashFlow,
		volumeIncreaseEbit,
		volumeIncreaseCashFlow,
		cogsEbit,
		cogsCashFlow,
		overheadEbit,
		overheadCashFlow,
		debtorsDayCashFlow,
		reductionInWip,
		increaseCreditorsDays,
		increaseDeferredRevenueDays,
		getAllStates
	} = financialsContext;
	const [chartWidth, setChartWidth] = useState<number>(800);
	const debtorsDayReduction = JSON.parse(localStorage.getItem('debtorsDayReduction') as string);
	const increaseInCreditorsDays = JSON.parse(
		localStorage.getItem('increaseInCreditorsDays') as string
	);
	const cogsIndex = JSON.parse(localStorage.getItem('cogsIndex') as string);
	const priceIncreaseIndex = JSON.parse(localStorage.getItem('priceIncreaseIndex') as string);
	const reductionWipDays = JSON.parse(localStorage.getItem('reductionWipDays') as string);
	const overheadReductionIndex = JSON.parse(
		localStorage.getItem('overheadReductionIndex') as string
	);
	const volumeIncreaseIndex = JSON.parse(localStorage.getItem('volumeIncreaseIndex') as string);
	const increaseInDeferredRevenueDays = JSON.parse(
		localStorage.getItem('increaseInDeferredRevenueDays') as string
	);

	useEffect(() => {
		if (
			priceIncreaseIndex &&
			volumeIncreaseIndex &&
			cogsIndex &&
			overheadReductionIndex &&
			debtorsDayReduction &&
			reductionWipDays &&
			increaseInCreditorsDays &&
			increaseInDeferredRevenueDays
		) {
			getAllStates(
				priceIncreaseIndex,
				volumeIncreaseIndex,
				cogsIndex,
				overheadReductionIndex,
				debtorsDayReduction,
				reductionWipDays,
				increaseInCreditorsDays,
				increaseInDeferredRevenueDays
			);
		}
		if (document.body.offsetWidth <= 1000) {
			setChartWidth(500);
		} else if (document.body.offsetWidth <= 1100) {
			setChartWidth(700);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const formatAsCurrency = (val: number) => Math.round(val);

	const formatAsDays = (val: number) => Math.round(val);

	const dataForChart: DataInterface[] = [
		{
			name: 'Price Increase',
			'Impact on EBIT': formatAsCurrency(priceIncreaseEbit),
			'Impact on Cash Flow': formatAsCurrency(priceIncreaseNetCashFlow),
			amt: 2400
		},
		{
			name: 'Volume Increase',
			'Impact on EBIT': formatAsCurrency(volumeIncreaseEbit),
			'Impact on Cash Flow': formatAsCurrency(volumeIncreaseCashFlow),
			amt: 2210
		},
		{
			name: 'CoGS Reduction',
			'Impact on EBIT': formatAsCurrency(cogsEbit),
			'Impact on Cash Flow': formatAsCurrency(cogsCashFlow),
			amt: 2290
		},
		{
			name: 'Overhead Reduction',
			'Impact on EBIT': formatAsCurrency(overheadEbit),
			'Impact on Cash Flow': formatAsCurrency(overheadCashFlow),
			amt: 2000
		},
		{
			name: 'Debtors Day Reductions',
			'Impact on EBIT': formatAsCurrency(debtorsDayCashFlow),
			'Impact on Cash Flow': 0,
			amt: 2181
		},
		{
			name: companyType === 'All Other' ? 'Reduction in Stock Days' : 'Reduction in WIP Days',
			'Impact on EBIT': formatAsDays(reductionInWip),
			'Impact on Cash Flow': 0,
			amt: 2500
		},
		{
			name: 'Increase in Creditors Days',
			'Impact on EBIT': formatAsDays(increaseCreditorsDays),
			'Impact on Cash Flow': 0,
			amt: 2100
		},
		{
			name: 'Deferred Revenue Days',
			'Impact on EBIT': formatAsDays(increaseDeferredRevenueDays),
			'Impact on Cash Flow': 0,
			amt: 2100
		}
	];
	return (
		<div className={styles.chartContainer}>
			<BarChart
				className={styles.chartContainer__body}
				data={dataForChart}
				height={507}
				margin={{
					top: 5,
					right: 30,
					left: 20,
					bottom: 25
				}}
				width={chartWidth}
			>
				<CartesianGrid strokeDasharray="3 3" />
				<XAxis angle={-10} dataKey="name" interval={0} tickMargin={15} />
				<YAxis />
				<Tooltip
					cursor={{
						// fill: 'var(--primary-color)56'
						fill: 'var(--cc-grey-hr)'
					}}
				/>
				<Legend height={36} verticalAlign="top" />
				<Bar dataKey="Impact on Cash Flow" fill="#c3c3c4" />
				<Bar dataKey="Impact on EBIT" fill="var(--primary-color)" />
			</BarChart>
		</div>
	);
};

export default MoneyForCeosChart;