/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/button-has-type */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-unused-prop-types */
import type { SelectChangeEvent } from '@mui/material/Select';
import type { ChangeEvent } from 'react';
import { useContext, useDeferredValue, useEffect, useState } from 'react';

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 { CompanyDbModel } from '../Companies/Components/CompaniesComponents.helper';
import type { FinancialsModel } from '../Financials/Components/FinancialsForm/FinancialsForm.helper';
import {
	demoFinancialFirst,
	demoFinancialSecond,
	demoFinancialThird
} from '../Financials/Components/UI/demo-user.helper';
import ListOfCompanies from '../Financials/Components/UI/SelectCompany';
import styles from './SelectFinancialsPage.module.scss';

interface SelectFinancialsPageInterface {
	title: string;
	toolInfo: string;
	listTextOne: string;
	listTextSecond: string;
	listTextThird: string;
	listTextFourth: string;
	numberOfFinancials: number;
	buttonId: string;
	linkHandler: (event: CompanyDbModel[]) => void;
	buttonTitle: string;
	description: string;
	isListOn: boolean;
	companies: string | CompanyDbModel[];
}
type CheckedFinancialsType = {
	[key: string]: boolean;
};

const SelectFinancialsPage = (props: SelectFinancialsPageInterface): JSX.Element => {
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const globalContext: GlobalStateModel = useContext(GlobalStateContext);
	const preLoadedFinancials = JSON.parse(localStorage.getItem('pre-loaded-financials') as string);
	const [financials, setFinancials] = useState<FinancialsModel[] | string>(
		preLoadedFinancials || []
	);
	const deferredCompanies = useDeferredValue(globalContext.companies);
	const [checkedFinancials, setCheckedFinancials] = useState<CheckedFinancialsType>({});

	const [showMore, setShowMore] = useState<boolean>(false);

	useEffect(() => {
		// localStorage.removeItem('selected-financials');
		// if (!globalContext.loggedInUser) {
		// 	globalContext.signInHandler();
		// }
		if (
			globalContext.companyPlan === 1
			// && globalContext.loggedInUser?.account_type?.title !== 'Advisor') {
		) {
			setFinancials([demoFinancialFirst, demoFinancialSecond, demoFinancialThird]);
			localStorage.setItem(
				'financials',
				JSON.stringify([demoFinancialFirst, demoFinancialSecond, demoFinancialThird])
			);
			localStorage.setItem('currency', '£');
			localStorage.setItem('first-financial', JSON.stringify(demoFinancialFirst) as string);
			localStorage.setItem('second-financial', JSON.stringify(demoFinancialSecond) as string);
			localStorage.setItem('third-financial', JSON.stringify(demoFinancialThird) as string);
			localStorage.setItem(
				'selected-financials',
				JSON.stringify([
					demoFinancialFirst.financials_id,
					demoFinancialSecond.financials_id,
					demoFinancialThird.financials_id
				]) as string
			);
		}
		if (preLoadedFinancials) {
			setFinancials(preLoadedFinancials);
		} else if (!preLoadedFinancials || typeof preLoadedFinancials === 'string') {
			setFinancials([]);
			localStorage.setItem('financials', JSON.stringify([]));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps, no-restricted-globals
		// TODO: loadedSelectedItemsHandler is removed this whole page should be revised!
		// if (globalContext.selectedFinancials && Array.isArray(globalContext.selectedFinancials)) {
		// 	financialsContext.loadedSelectedItemsHandler(globalContext.selectedFinancials);
		// }
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [globalContext.financials]);

	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);
		// }
	}

	function selectCompanyHandler(event: SelectChangeEvent<string>) {
		globalContext.getFinancialsFromSelectedCompany(event.target.value as string);
	}

	function submitHandler(): void {
		props.linkHandler(props.companies as CompanyDbModel[]);
		globalContext.nextButtonHandler();
		globalContext.getSelectedFinancials();
	}

	function showMoreHandler() {
		setShowMore(!showMore);
	}

	const className = {
		container: styles.selectCompaniesContainer,
		box: styles.selectCompaniesBox
	};

	useEffect(() => {
		if (financials.length > 0) {
			setFinancials(financials as FinancialsModel[]);
		}
		if (deferredCompanies.length > 1) {
			setFinancials([]);
		}
		if (globalContext.selectedFinancials && Array.isArray(globalContext.selectedFinancials)) {
			const preSelectedFinancials = globalContext.selectedFinancials.map((item) => item);
			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));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return (
		<div className={styles.container}>
			<div className={styles.container__main}>
				<div className={styles.container__main__header}>
					<p className={styles.container__main__header__paragraph}>
						<small>{props.title}</small>
						{showMore ? props.description : `${props.description.slice(0, 20)}...`}
					</p>
					{props.isListOn && showMore && (
						<ul>
							{props.toolInfo && <h6>{props.toolInfo}</h6>}
							{props.listTextOne && <li>{props.listTextOne}</li>}
							{props.listTextSecond && <li>{props.listTextSecond}</li>}
							{props.listTextThird && <li>{props.listTextThird}</li>}
							{props.listTextFourth && <li>{props.listTextFourth}</li>}
						</ul>
					)}
					<p className={styles.showLessMore} onClick={showMoreHandler}>
						{!showMore ? 'Show more' : 'Show less'}
					</p>
					<div className={styles.container__main__list}>
						<p>
							Please select a minimum of {props.numberOfFinancials} sets of financials to use with
							this tool.
						</p>
						<p className={styles.container__main__list__listTitle}>
							{props.companies.length === 1 && (
								<small>{(props.companies[0] as CompanyDbModel).company_name}</small>
							)}
							Financial period
						</p>
					</div>
					<div className={styles.list_items}>
						{typeof props.companies !== 'string' && props.companies.length > 1 && (
							<ListOfCompanies
								className={className}
								labelPlaceholder="Select company to view financials"
							/>
						)}
						{financials !== 'no financials found' &&
							financials.length !== 0 &&
							financials &&
							(financials as FinancialsModel[]).map((item: FinancialsModel, index: number) =>
								item.input ? (
									// 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>
					<button className={styles.submitButton} onClick={submitHandler}>
						{props.buttonTitle}
					</button>
				</div>
			</div>
		</div>
	);
};

export default SelectFinancialsPage;