import { useContext } from 'react';

import type { DashboardContextModel } from '../../../../Store/Dashboard/dashboard-context';
import { DashboardContext } from '../../../../Store/Dashboard/dashboard-context';
import styles from '../../Dashboard.module.scss';
import PieChartContainer from '../Schema/PieChartContainer';
import type { DataArray, OptionsModule } from '../Schema/TwoRowPieChart';

const ReturnOnEquityChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const { returnOnEquityChange, returnOnEquitySecond } = dashboardContext;
	const data: DataArray = [
		['Return Equity', 'Return Equity'],
		['Return Equity', +returnOnEquitySecond.toFixed(2)]
	];
	const options: OptionsModule = {
		title: 'Return on Equity',
		pieHole: 0.4,
		is3D: false
	};
	return (
		<div className={styles.smallChartsTitle}>
			<PieChartContainer
				data={data}
				firstCalculation={returnOnEquityChange.toFixed(2)}
				firstCalculationName="Return On Equity"
				firstSign="%"
				options={options}
				secondCalculation=""
				secondCalculationName=""
				secondSign=""
				thirdCalculation=""
				thirdCalculationName=""
				thirdSign=""
				title="Return on Equity"
			/>
		</div>
	);
};

export default ReturnOnEquityChart;