import { useContext } from 'react';

import type { DashboardContextModel } from '../../../../Store/Dashboard/dashboard-context';
import { DashboardContext } from '../../../../Store/Dashboard/dashboard-context';
import GaugeChart from '../../Helpers/GaugeChart';
import PieChartContainer from '../Schema/PieChartContainer';
import type { DataArray, DataObjectArray, 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 labels: DataObjectArray = [['Change', +returnOnAssetsChange.toFixed(2), '%']];
	const options: OptionsModule = {
		title: 'Return On Total Assets',
		pieHole: 0.4,
		is3D: false
	};
	return (
		<div>
			<GaugeChart
				title="Return On Total Assets"
				// @ts-ignore
				value={returnOnAssetsSecond.toFixed(2)}
				change={120}
				extremes={[5, 20]}
				extremesLabels={['< 5%', '20% <']}
				needleColor="var(--cc-pink-dark)"
				// segments={[
				// 	{ range: 30, color: '#90caf9' },
				// 	{ range: 30, color: '#42a5f5' },
				// 	{ range: 30, color: '#1565c0' }
				// ]}
				segments={[
					{ range: 30, color: 'var(--cc-pink-light)' },
					{ range: 30, color: 'var(--cc-pink-medium)' },
					{ range: 30, color: 'var(--cc-pink-dark)' }
				]}
				// @ts-ignore
				labels={labels}
			/>
		</div>
	);
};

export default ReturnOnTotalAssetsChart;