/* eslint-disable react/jsx-no-bind */
import { useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import InsightsHeader from '../../Components/Layout/Header/InsightsHeader';
import type { RootState } from '../../ReduxState/store';
import type { FinancialsContextModel } from '../../Store/Financials/financials-context';
import { FinancialsContext } from '../../Store/Financials/financials-context';
import type { FinancialsTypeContextModel } from '../../Store/Financials/financials-form-context-helper';
import { FinancialsFormContext } from '../../Store/Financials/financialsForm-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 FinancialsForm from './Components/FinancialsForm/FinancialsForm';
import { formDefaultValues } from './Components/FinancialsForm/FinancialsForm.helper';
import type { FinancialsModel } from './Components/FinancialsForm/FinancialsForm.helper';
import FinancialsHome from './Components/FinancialsHome';
import styles from './Financials.module.scss';

const Financials = (): JSX.Element => {
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const financialsForm: FinancialsTypeContextModel = useContext(FinancialsFormContext);
	const [addFinancials, setAddFinancials] = useState<boolean>(true);
	const [loaded, setLoaded] = useState<boolean>(false);
	const [itemForEdit, setItemForEdit] = useState<FinancialsModel>({
		company_id: '',
		selected: false,
		financials_id: '',
		cognito_username: '',
		input: formDefaultValues
	});
	/** NEW start */
	const [displayForm, setDisplayForm] = useState<boolean>(false);
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	/** NEW end */
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);

	function changeHandler() {
		// financialsForm.switchToFormHandler(!financialsForm.switchToForm);
		setAddFinancials(!addFinancials);
		setDisplayForm(!displayForm);
	}

	function itemForEditHandler(event: FinancialsModel) {
		setItemForEdit(event);
	}

	useEffect(() => {
		if (!loaded) {
			setLoaded(true);
			return;
		}
		if (financialsForm.formSendSuccessfully) {
			setDisplayForm(false);
		} else {
			console.log('^^^ displaying the form');
			setDisplayForm(true);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [financialsForm.formSendSuccessfully]);

	return (
		<div className={styles.financials}>
			<div className={styles.mainContent}>
				<InsightsHeader numberOfButtons={1} title="Financials" />
				{!displayForm && (
					<FinancialsHome
						// addFinancials={addFinancials}
						addIcon={styles.addIcon}
						changeHandler={changeHandler}
						collapseContainer={financialsContext.classForPopup}
						financialsId={globalContext.financialsId}
						financialsList={styles.financialsList}
						financialsListForm={styles.financialsListForm}
						financialsTable={styles.table}
						financialsTableClass={styles.homePage}
						financialsTableContainer={styles.financialsContainer}
						formAdvisor={styles.formAdvisor}
						isCompanySelected={globalContext.isCompanySelected}
						itemForEdit={itemForEditHandler}
						lastUpdate={globalContext.recordUpdated}
						listOfCompanies={globalContext.companies}
						payload={globalContext.payload.company_id}
						recordUpdated={globalContext.recordUpdated}
					/>
				)}
				{displayForm && selectedCompany && (
					<FinancialsForm
						changeHandler={changeHandler}
						companyId={globalContext.payload.company_id}
						companyType={globalContext.companyType}
						financialsId={globalContext.financialsId}
						itemForEdit={itemForEdit}
					/>
				)}
			</div>
			{/* <ProgressBar/> */}
		</div>
	);
};

export default Financials;