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';

const ReturnsOnInvestedCapitalChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const { netOperatingAssetsChange, netProfitPreTaxChange } = dashboardContext;
	const data: DataArray = [
		['Profit', 'Assets'],
		['Profit', +netProfitPreTaxChange.toFixed(2)],
		['Assets', +netOperatingAssetsChange.toFixed(2)]
	];
	const options: OptionsModule = {
		title: 'RETURN ON INVESTED CAPITAL',
		pieHole: 0.4,
		is3D: false
	};
	return (
		<div>
			<PieChartContainer
				data={data}
				firstCalculation={netProfitPreTaxChange.toFixed(2)}
				firstCalculationName="Net Profit (pre-tax) change"
				firstSign="%"
				options={options}
				secondCalculation={netOperatingAssetsChange.toFixed(2)}
				secondCalculationName="Net Operating Assets change"
				secondSign="%"
				thirdCalculation=""
				thirdCalculationName=""
				thirdSign=""
				title="RETURN ON INVESTED CAPITAL"
			/>
		</div>
	);
};

export default ReturnsOnInvestedCapitalChart;