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 DebtToEquityChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const { debtToEquityChange, debtToEquitySecond } = dashboardContext;
	const data: DataArray = [
		['Debt to Equity', 'Debt to Equity '],
		['Debt to Equity', +(+debtToEquitySecond).toFixed(2)]
	];
	const options: OptionsModule = {
		title: 'Debt To Equity',
		pieHole: 0.4,
		is3D: false
	};
	return (
		<div>
			<PieChartContainer
				data={data}
				firstCalculation={(+debtToEquityChange).toFixed(2)}
				firstCalculationName="Debt To Equity Change"
				firstSign="%"
				options={options}
				secondCalculation=""
				secondCalculationName=""
				secondSign=""
				thirdCalculation=""
				thirdCalculationName=""
				thirdSign=""
				title="Debt To Equity"
			/>
		</div>
	);
};

export default DebtToEquityChart;