/* eslint-disable react/destructuring-assignment */
import { IconButton } from '@mui/material';
import axios from 'axios';
import { useContext, useDeferredValue, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import environment from '../../../Environments/environment';
import type { CompanyDbModel } from '../../../Pages/Companies/Components/CompaniesComponents.helper';
import type { FinancialsModel } from '../../../Pages/Financials/Components/FinancialsForm/FinancialsForm.helper';
import type { GlobalStateModel } from '../../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../../Store/global/GlobalState-context';
import CloseIcon from '../Images/Close icon/CloseIconSvg';
import styles from './ButtonClickErrorMessage.module.scss';

const ButtonClickErrorMessage = (props: {
	financialsNumber: number;
	closeHandler: () => void;
	allCompanies: CompanyDbModel[] | string;
}): JSX.Element => {
	const { companies, financials } = environment.frontendRoutes;
	const [selectedFinancialsLength, setSelectedFinancialsLength] = useState<number>(0);
	const selectedFinancials = JSON.parse(localStorage.getItem('selected-financials') as string);
	const [nameOfThePage, setNameOfThePage] = useState<string>('');
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);
	const deferredSelectedFinancials: FinancialsModel[] | string | [] = useDeferredValue(
		JSON.parse(localStorage.getItem('selected-financials') as string)
	);
	const { apiUrl, backendRoutes } = environment;

	async function fetchAllFinancials(id: string): Promise<FinancialsModel[]> {
		const listOfFinancials: FinancialsModel[] = [];
		axios
			.post(apiUrl + backendRoutes.financials.get, {
				company_id: id
			})
			.then(({ data }) => {
				if (typeof data !== 'string') {
					listOfFinancials.push(...data);
				}
			});
		return listOfFinancials;
	}

	useEffect(() => {
		if (selectedFinancials && selectedFinancials.length) {
			setSelectedFinancialsLength(selectedFinancials.length);
		}

		const pageName = window.location.pathname.split('/')[1];
		setNameOfThePage(pageName);
		fetchAllFinancials((props.allCompanies as CompanyDbModel[])[0].company_id);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedFinancialsLength]);

	return (
		<div className={styles.emptyCompanyErrorMessageContainer}>
			<div className={styles.emptyCompanyErrorMessage}>
				<IconButton aria-label="delete" className={styles.closeButton} onClick={props.closeHandler}>
					<CloseIcon />
				</IconButton>
				{typeof globalContext.companies === 'string' && <h5>Please First Create Company</h5>}
				{typeof globalContext.companies !== 'string' &&
					props.financialsNumber &&
					globalContext.companies.length !== 1 && (
						<>
							<h5>Please Select one of your Company</h5>
							<p>
								You need to select {props.financialsNumber} financials from it to proceed to{' '}
								<span className={styles.nameOFThePage}>{nameOfThePage}</span> page
							</p>
						</>
					)}
				{typeof globalContext.financials === 'string' &&
					typeof globalContext.companies !== 'string' && (
						<>
							<h5>Please Select Financials</h5>
							<p>
								You need to select {props.financialsNumber} financials from your company to proceed
								to <span className={styles.nameOFThePage}>{nameOfThePage}</span> page
							</p>
						</>
					)}
				{typeof globalContext.financials === 'string' &&
					typeof globalContext.companies !== 'string' && (
						<p>
							Do you want to create
							<Link to={financials}> Financials?</Link>
						</p>
					)}
				{typeof globalContext.companies === 'string' && (
					<div className={styles.emptyCompanyErrorMessage__buttons}>
						<Link to={companies}>Create Company</Link>
					</div>
				)}
				{deferredSelectedFinancials !== null &&
					deferredSelectedFinancials.length !== 0 &&
					typeof globalContext.financials !== 'string' && (
						<p className={styles.errorMessageParagraph}>
							You have to select {props.financialsNumber} financials
						</p>
					)}
				{deferredSelectedFinancials === null && typeof globalContext.financials !== 'string' && (
					<p className={styles.errorMessageParagraph}>
						You have to select {props.financialsNumber} financials
					</p>
				)}
			</div>
		</div>
	);
};

export default ButtonClickErrorMessage;