/* eslint-disable react/jsx-no-bind */
import type { ChangeEvent } from 'react';
import { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import environment from '../../Environments/environment';
import type { FinancialsContextModel } from '../../Store/Financials/financials-context';
import { FinancialsContext } from '../../Store/Financials/financials-context';
import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
import type { FinancialsModel } from '../Financials/Components/FinancialsForm/FinancialsForm.helper';
import styles from './LandingPage.module.scss';
import LandingPagePicture from './LandingPagePicture';

const LandingPage = (): JSX.Element => {
	const globalContext: GlobalStateModel = useContext(GlobalStateContext);
	const { tools, financials } = environment.frontendRoutes;
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const [checkedFinancials, setCheckedFinancials] = useState<any>({});

	const selectFinancialsHandler = () => {
		// TODO: update the code so it no longer saves data in financial-cotnext
	};
	// function selectFinancialsHandler(event: ChangeEvent<HTMLInputElement>) {
	// 	const item = event.target.name as string;
	// 	const { name, checked } = event.target;
	// 	setCheckedFinancials((prevState: any) => ({
	// 		...prevState,
	// 		[name]: checked
	// 	}));
	// 	if (event.target.checked) {
	// 		financialsContext.selectedItemsHandler(item);
	// 	} else {
	// 		financialsContext.unselectedItemHandler(item);
	// 	}
	// }

	// TODO: loadedSelectedItemsHandler is removed below code should no longer be in use
	// useEffect(() => {
	// 	// if (!globalContext.loggedInUser) {
	// 	// 	globalContext.signInHandler();
	// 	// }
	// 	if (globalContext.selectedFinancials) {
	// 		const preSelectedFinancials = globalContext.selectedFinancials.map((item) => item);
	// 		if (globalContext.financials) {
	// 			const allFinancialsId = (globalContext.financials as FinancialsModel[]).map(
	// 				(financial) => financial.financials_id
	// 			);
	// 			const commonElements = preSelectedFinancials.filter((element) =>
	// 				allFinancialsId.includes(element)
	// 			);
	// 			const preCheckedFinancials = allFinancialsId.map((elem) =>
	// 				commonElements.includes(elem)
	// 					? {
	// 							[elem]: true
	// 					  }
	// 					: {
	// 							[elem]: false
	// 					  }
	// 			);
	// 			setCheckedFinancials(Object.assign({}, ...preCheckedFinancials));
	// 			if (globalContext.selectedFinancials && globalContext.selectedFinancials.length !== 0) {
	// 				financialsContext.loadedSelectedItemsHandler(globalContext.selectedFinancials);
	// 			}
	// 		}
	// 	}
	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
	// }, []);

	function saveSelectionHandler(): void {
		globalContext.nextButtonHandler();
	}

	return (
		<div>
			{/* <InsightsHeader numberOfButtons={1} title={''}/> */}
			{globalContext.companyPlan === 3 || globalContext.companyPlan === 2 ? (
				<div className={styles.container}>
					<LandingPagePicture />
					{financials &&
					globalContext.financials &&
					globalContext.financials.length > 0 &&
					typeof globalContext.financials !== 'string' ? (
						<div>
							<p>Please Select Financials In Order To Continue</p>
							<div className={styles.list_items}>
								{globalContext.financials &&
									globalContext.financials.map((item, index) => (
										// eslint-disable-next-line react/no-array-index-key
										<label key={index} id={item.financials_id}>
											<input
												checked={checkedFinancials[item.financials_id]}
												id={index.toString()}
												name={item.financials_id}
												onChange={selectFinancialsHandler}
												type="checkbox"
											/>
											<p data-company-name="companyName">
												{`${item.input?.['Month Start']}
																							${item.input?.['Year Start']} -
																							${item.input?.['Month Ending']}
																							${item.input?.['Year Ending']}`}
											</p>
										</label>
									))}
							</div>
						</div>
					) : (
						<p>No financials added yet</p>
					)}
					{globalContext.financials &&
					globalContext.financials.length > 0 &&
					typeof globalContext.financials !== 'string' ? (
						<Link onClick={saveSelectionHandler} to={tools}>
							Next
						</Link>
					) : (
						<Link to={financials}>Please Add Financials</Link>
					)}
				</div>
			) : (
				<div className={styles.container}>
					<LandingPagePicture />
					<p>Try cash flow improvement tools with sample data</p>
					<Link to={tools}>Next</Link>
				</div>
			)}
		</div>
	);
};

export default LandingPage;