import { useContext } from 'react';

import type { CashFlowPerspectiveContextModel } from '../../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import { CashFlowPerspectiveContext } from '../../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import type { DashboardContextModel } from '../../../../Store/Dashboard/dashboard-context';
import { DashboardContext } from '../../../../Store/Dashboard/dashboard-context';
import GaugeChart from '../../Helpers/GaugeChart';
import type { DataObjectArray } from '../Schema/TwoRowPieChart';

const ReturnsOnInvestedCapitalChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const { netOperatingAssetsChange, netProfitPreTaxChange } = dashboardContext;
	console.log('Dashboard context', dashboardContext);
	const perspectiveContext: CashFlowPerspectiveContextModel = useContext(
		CashFlowPerspectiveContext
	);

	const labels: DataObjectArray = [
		['Net Profit (pre-tax) change', +netProfitPreTaxChange.toFixed(2), '%'],
		['Net Operating Assets change', +netOperatingAssetsChange.toFixed(2), '%']
	];
	return (
		<div>
			<GaugeChart
				title="Return on Invested Capital"
				// @ts-ignore
				value={perspectiveContext.returnOnCapitalSecond}
				change={120}
				extremes={[0, 100]}
				// extremesLabels={['0% >', '50%', '100% <']}
				extremesLabels={['0% >', '100% <']}
				needleColor="#33691E"
				// segments={[
				// 	{ range: 30, color: '#dcedc8' },
				// 	{ range: 30, color: '#aed581' },
				// 	{ range: 30, color: '#689f38' }
				// ]}
				segments={[
					{ range: 30, color: 'var(--cc-lime-light)' },
					{ range: 30, color: 'var(--cc-lime-medium)' },
					{ range: 30, color: 'var(--cc-lime-dark)' }
				]}
				// @ts-ignore
				labels={labels}
			/>
		</div>
	);
};

export default ReturnsOnInvestedCapitalChart;