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 ReturnOnTotalAssetsChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const { returnOnAssetsChange, returnOnAssetsSecond } = dashboardContext;
	const data: DataArray = [
		['Total Assets', 'Total Assets'],
		['Total Assets', +returnOnAssetsSecond.toFixed(2)]
	];
	const options: OptionsModule = {
		title: 'RETURN ON TOTAL ASSETS',
		pieHole: 0.4,
		is3D: false
	};
	return (
		<div>
			<PieChartContainer
				data={data}
				firstCalculation={returnOnAssetsChange.toFixed(2).toString()}
				firstCalculationName="Return On Total Assets"
				firstSign="%"
				options={options}
				secondCalculation=""
				secondCalculationName=""
				secondSign=""
				thirdCalculation=""
				thirdCalculationName=""
				thirdSign=""
				title="RETURN ON TOTAL ASSETS"
			/>
		</div>
	);
};

export default ReturnOnTotalAssetsChart;