import ReadMoreIcon from '@mui/icons-material/ReadMore';
import type { SelectChangeEvent } from '@mui/material/Select';
import type { ChangeEvent } from 'react';
import React, { useContext, useDeferredValue, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';

import InsightsHeader from '../../Components/Layout/Header/InsightsHeader';
import type { RootState } from '../../ReduxState/store';
import type { CompanyContextModel } from '../../Store/Companies/company-context-helper';
import { CompaniesContext } from '../../Store/Companies/company-context-helper';
import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
import type { UserModel } from '../../Store/User/user-context.helper';
import css from '../CashFlowAnalysis/CashFlowAnalysisPage.module.scss';
import companyDropdownPredefinedValues from './Companies.helper';
import styles from './Companies.module.scss';
import AddNewCompany from './Components/AddNewCompany';
import type { CompanyDbModel } from './Components/CompaniesComponents.helper';
import { companyEditHandler } from './Components/CompaniesController';
import { CompaniesList } from './Components/CompaniesList';

const Companies: React.FC = (): JSX.Element => {
	/** NEW */
	// const [showPage, setShowPage] = useState<boolean>(false);
	const [showCompanyForm, setShowCompanyForm] = useState<boolean>(false);
	const companies = useSelector(
		(state: RootState): CompanyDbModel[] | null => state.companies.companiesList
	);
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);

	// ALWAYS SHOW COMPANIES MANAGEMENT
	// even if the current company is in demo, the user may want to create or
	// edit/upgrade another company with a paid plan
	// useEffect(() => {
	// 	if (selectedCompany && selectedCompany.plan.id > 1) {
	// 		setShowPage(true);
	// 	}
	// }, [selectedCompany]);

	/** NEW end */
	const companyContext: CompanyContextModel = useContext<CompanyContextModel>(CompaniesContext);
	const [companyName, setCompanyName] = useState<string>('');
	const [subscriber, setSubscriber] = useState<string>('');
	const [companyRegNumber, setCompanyRegNumber] = useState<number>(0);
	const [industryType, setIndustryType] = useState<string>(
		companyDropdownPredefinedValues.industryType[0].value
	);
	const [industry, setIndustry] = useState<string>(
		companyDropdownPredefinedValues.industry[0].value
	);
	const [currency, setCurrency] = useState<string>(
		companyDropdownPredefinedValues.currency[0].value
	);
	const [companyId, setCompanyId] = useState<string>('');
	const [industryId, setIndustryId] = useState<number>(0);
	const navigate = useNavigate();

	const deferredUserType: UserModel = useDeferredValue(
		JSON.parse(localStorage.getItem('accountType') as string)
	);

	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);
	// const { companies, loggedInUser, signInHandler } = globalContext;

	function setStatesHandler(event: CompanyDbModel) {
		setCompanyName(event.company_name);
	}

	function companyNameHandler(event: ChangeEvent<HTMLInputElement>): void {
		setCompanyName(event.target.value);
	}
	function industryHandler(event: SelectChangeEvent<string>): void {
		setIndustry(event.target.value);
	}

	function editHandler(selectedCompanyId: string) {
		// eslint-disable-next-line no-alert
		alert('TODO: editHandler');
		// companyEditHandler({
		// 	selectedCompanyId,
		// 	companies,
		// 	setCompanyName,
		// 	setIndustryType,
		// 	setCurrency,
		// 	setIndustryId,
		// 	setCompanyId,
		// 	setCompanyRegNumber
		// });
		// companyContext.switchHandler();
	}

	function companyRegNumberHandler(event: number): void {
		setCompanyRegNumber(event);
	}

	function subscriberHandler(event: string): void {
		setSubscriber(event);
	}

	return (
		<div className={styles.companiesContainer}>
			<div className={styles.companiesContext}>
				<InsightsHeader numberOfButtons={1} title="Companies" />
				{companies && (
					<CompaniesList
						companies={companies}
						editHandler={editHandler}
						setInputHandler={setStatesHandler}
						switchToForm={companyContext.switchHandler}
					/>
				)}

				{showCompanyForm && (
					<AddNewCompany
						cancelButton={styles.cancelButton}
						companyId={companyId}
						companyName={companyName}
						companyNameHandler={companyNameHandler}
						companyRegNumberHandler={companyRegNumberHandler}
						container={styles.addCompanyContainer}
						currencyValue={currency}
						formGroup={styles.formGroup}
						id="companyName"
						industryHandler={industryHandler}
						industryId={industryId}
						industryTypeValue={industryType}
						industryValue={industry}
						inputContainerClassName={styles.inputLabelContainer}
						saveButtonIcon={styles.saveButtonIcon}
						saveCancelButtons={styles.saveCancelButtons}
						selectBox={styles.selectContainerBox}
						selectContainer={styles.selectContainer}
						submitButton={styles.submitButton}
						subscriberHandler={subscriberHandler}
						switchToList={companyContext.switchHandler}
						title="Add new company"
					/>
				)}

				{/* {!showCompanyForm && (
					<div
						className={css.redirectPageContainer__subContainer}
						style={{
							textAlign: 'center'
						}}
					>
						<Link to="/manageSubscriptions">Please upgrade your plan</Link>
						<h5>to be able to edit company details</h5>
						<p>Check what you&apos;ll get bonus by upgrading you account</p>
						<div className={css.icon} onClick={() => navigate('/manageSubscriptions')}>
							<ReadMoreIcon />
						</div>
					</div>
				)} */}
			</div>
			{/* <ProgressBar/> */}
		</div>
	);
};

export default React.memo(Companies);