import SingleInfoTab from '../Schema/SingleInfoTab';
import type { DataArray, OptionsModule } from '../Schema/TwoRowPieChart';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../../ReduxState/store';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import { moneyForGrowthCalculations } from '../../../../utils/moneyForGrowthCalculations';

const MoneyForGrowthSurplusShortfallChart = (): JSX.Element => {
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);

	if (!selectedFinancials || selectedFinancials.length < 2) return <></>;
	const { input } = selectedFinancials[selectedFinancials.length - 1];

	const calculated = moneyForGrowthCalculations(input, 100);
	const { shortfall } = calculated;
	console.log('calculated SHORTFALL', shortfall);

	const data: DataArray = [
		['Shortfall', 'Surplus'],
		['Shortfall/Surplus', +shortfall]
	];
	const options: OptionsModule = {
		title: 'YOUR MONEY FOR GROWTH',
		pieHole: 0.4,
		is3D: false
	};

	return (
		<div>
			{/* <h3>YOUR MONEY FOR GROWTH</h3> */}
			<div className="p-4">
				<SingleInfoTab
					price={shortfall.toString()}
					priceAsCurrency
					heading="YOUR MONEY FOR GROWTH"
					title={+shortfall >= 0 ? 'SURPLUS' : 'SHORTFALL'}
					Icon={+shortfall >= 0 ? 'BanknoteArrowUp' : 'BanknoteArrowDown'}
					Theme={+shortfall >= 0 ? 'surplus' : 'shortfall'}
				/>
			</div>
		</div>
	);
};

export default MoneyForGrowthSurplusShortfallChart;