import { useContext } from 'react';
import { useSelector } from 'react-redux';

import type { RootState } from '../../../../ReduxState/store';
import type { CashFlowMetricModel } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
import { CashFlowMetricContext } from '../../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
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 type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import GaugeChart from '../../Helpers/GaugeChart';
import PieChartContainer from '../Schema/PieChartContainer';
import type { DataArray, DataObjectArray, OptionsModule } from '../Schema/TwoRowPieChart';

const WorkingCapitalGaugeChart = (): JSX.Element => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const currencyLabel = `${
		typeof selectedCompany?.currency_symbol === 'string'
			? 'GBP'
			: selectedCompany?.currency_symbol.value
	}`;

	const dashboardContext: DashboardContextModel = useContext(DashboardContext);
	const cashFlowMetricContext: CashFlowMetricModel = useContext(CashFlowMetricContext);
	const perspectiveContext: CashFlowPerspectiveContextModel = useContext(
		CashFlowPerspectiveContext
	);

	const labels: DataObjectArray = [['Change', +cashFlowMetricContext.workingCapitalChange, '%']];

	const value = cashFlowMetricContext.workingCapitalPercentSecond;
	const secondSegment = 100 - +value;
	const firstSegment = 100 - secondSegment;

	return (
		<div>
			<GaugeChart
				title="Working Capital"
				subtitle={`${(+cashFlowMetricContext.workingCapitalSecond).toLocaleString('en-GB', {
					style: 'currency',
					currency: currencyLabel,
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				})}`}
				// @ts-ignore
				value={cashFlowMetricContext.workingCapitalPercentSecond}
				change={120}
				extremes={[0, 100]}
				extremesLabels={['0%', '100%']}
				needleColor="#33691E"
				segments={[
					{ range: firstSegment, color: '#689f38' },
					{ range: secondSegment, color: '#dcedc8' }
				]}
				// @ts-ignore
				labels={labels}
			/>
		</div>
	);
};

export default WorkingCapitalGaugeChart;