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';
import { FundingMeters, type FundingMetersModel } from '../../../../Store/CashFlowAnalysis/FundingMeters/FundingMeters-context';

const DebtToEquityChart = (): JSX.Element => {
	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const fundingContext: FundingMetersModel = useContext(FundingMeters);
	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
	};

	console.log('debtToEquityChange', debtToEquityChange, fundingContext.debtToEquityChange);
	const labels: DataObjectArray = [['Change', (+fundingContext.debtToEquityChange).toFixed(2), '%']];

	return (
		<div>
			<GaugeChart
				title="Debt-to-Equity"
				// @ts-ignore
				value={(+fundingContext.debtToEquitySecond).toFixed(2)}
				change={120}
				extremes={[0, 2]}
				extremesLabels={['0 >', '1', '2 <']}
				needleColor="var(--cc-green-dark)"
				// segments={[
				// 	{ range: 50, color: '#10b981' },
				// 	{ range: 50, color: '#f43f5e' }
				// 	// { range: 30, color: '#8e24aa' }
				// ]}
				segments={[
					{ range: 50, color: 'var(--cc-primary)' },
					{ range: 50, color: 'var(--cc-cool-gray)' }
				]}
				// @ts-ignore
				labels={labels}
			/>
		</div>
	);
};

export default DebtToEquityChart;