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 GaugeChart from '../../Helpers/GaugeChart';
import PieChartContainer from '../Schema/PieChartContainer';
import type { DataArray, DataObjectArray, 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
	};

	const labels: DataObjectArray = [['Change', +returnOnEquityChange.toFixed(2), '%']];

	return (
		<div className={styles.smallChartsTitle}>
			<GaugeChart
				title="Return On Equity"
				// @ts-ignore
				value={returnOnEquitySecond.toFixed(2)}
				change={120}
				extremes={[10, 30]}
				extremesLabels={['< 10%', '30% <']}
				needleColor="var(--cc-purple-dark)"
				// segments={[
				// 	{ range: 30, color: '#f8bbd0' },
				// 	{ range: 30, color: '#ce93d8' },
				// 	{ range: 30, color: '#8e24aa' }
				// ]}
				segments={[
					{ range: 30, color: 'var(--cc-purple-light)' },
					{ range: 30, color: 'var(--cc-purple-medium)' },
					{ range: 30, color: 'var(--cc-purple-dark)' }
				]}
				// @ts-ignore
				labels={labels}
			/>
		</div>
	);
};

export default ReturnOnEquityChart;