import { useContext } from 'react';

import type { DashboardContextModel } from '../../../../Store/Dashboard/dashboard-context';
import { DashboardContext } from '../../../../Store/Dashboard/dashboard-context';
import PieChartContainer from '../Schema/PieChartContainer';
import type { DataArray, OptionsModule } from '../Schema/TwoRowPieChart';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import { moneyForGrowthCalculations } from '../../../../utils/moneyForGrowthCalculations';

const NetProfitPreTaxChart = (): JSX.Element => {
	// const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	// const { lessTax, lessDividend, retainedProfit } = dashboardContext;
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	if (!selectedFinancials || selectedFinancials.length === 0) {
		return <></>;
	}
	const { input } = selectedFinancials[selectedFinancials.length - 1];
	const calculations = moneyForGrowthCalculations(input, 100);

	const { lessTax, lessDividend, retainedProfit } = calculations;
	const data: DataArray = [
		['Less Tax', 'Less Tax '],
		['Less Tax', +lessTax],
		['Dividend', +lessDividend],
		['Retained Profit', +retainedProfit]
	];
	const options: OptionsModule = {
		// title: 'Net Profit (Pre-Tax) Distribution',
		title: '',
		pieHole: 0,
		is3D: false
	};
	return (
		<div>
			<PieChartContainer
				data={data}
				firstCalculation={lessTax}
				firstCalculationName="Tax"
				firstSign="%"
				options={options}
				secondCalculation={lessDividend}
				secondCalculationName="Dividend"
				secondSign="%"
				thirdCalculation={retainedProfit}
				thirdCalculationName="Retained Profit"
				thirdSign=""
				title="Net Profit (Pre-Tax) Distribution"
			/>
		</div>
	);
};

export default NetProfitPreTaxChart;