import type React from 'react';
import { useContext, useDeferredValue, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import InsightsHeader from '../../../Components/Layout/Header/InsightsHeader';
import environment from '../../../Environments/environment';
import CashFlowPerspectiveContextProvider from '../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import FundingMetersProvider from '../../../Store/CashFlowAnalysis/FundingMeters/FundingMeters-context';
import type { GlobalStateModel } from '../../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../../Store/global/GlobalState-context';
import CashFlowFooter from '../CashFlowSummary/Components/CashFlowFooter';
import FundingMeterTable from './Components/FundingMetersTable';
import styles from './FundingMeters.module.scss';

const FundingMeters: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const { dashboard, financialReturns, cashFlowSummary } = environment.frontendRoutes;
	const firstFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('first-financial') as string)
	);
	const secondFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('second-financial') as string)
	);
	const thirdFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('third-financial') as string)
	);
	const navigate = useNavigate();
	const globalContext: GlobalStateModel = useContext(GlobalStateContext);

	useEffect(() => {
		window.scrollTo(0, 0);
		if (!firstFinancial && !secondFinancial && !thirdFinancial && globalContext.companyPlan !== 3) {
			navigate(cashFlowSummary);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);
	return (
		<div className={styles.container}>
			<FundingMetersProvider>
				<CashFlowPerspectiveContextProvider>
					<div className={styles.container__body}>
						{!print && <InsightsHeader numberOfButtons={3} title="Cash Flow Analytics" />}
						<div className={styles.container__body__main}>
							<FundingMeterTable
								bodyMainParagraph={styles.container__body__main__paragraph}
								print={print}
							/>
							{/* {!print && (
								<CashFlowFooter
									backTo={financialReturns}
									buttonClassName={styles.footerContainer__button}
									buttonHelpText=""
									buttonText="View dashboard"
									classNameBtnHelperText={styles.footerContainer__buttonTextHelper}
									container={styles.footerContainer}
									linkText="Back to financial returns"
									linkTo={dashboard}
									svgClassName={styles.footerContainer__svg}
								/>
							)} */}
						</div>
					</div>
				</CashFlowPerspectiveContextProvider>
			</FundingMetersProvider>
		</div>
	);
};

export default FundingMeters;