/* eslint-disable react/jsx-no-bind */
import type { ChangeEvent } from 'react';
import type React from 'react';
import { useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import environment from '../../../Environments/environment';
import type { RootState } from '../../../ReduxState/store';
import type { FinancialsContextModel } from '../../../Store/Financials/financials-context';
import { FinancialsContext } from '../../../Store/Financials/financials-context';
import type { IndustryModel } from '../../../Store/Financials/financialsContext.helper';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';
import type { FinancialsModel } from '../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import ArrowSvg from '../../Financials/Components/UI/ArrowSvg';
import ReloadSvg from '../../Financials/Components/UI/ReloadSvg';
import styles from './MoneyCeosBusinessHeader.module.scss';
import findRightIndustryIndexHandler from './MoneyForBusiness.helper';
import { useUiContext } from '../../../Store/UiContext/UiContext';
import hasEditPermission from '../../../utils/getUserPermissions';
import Button from '../../../Components/UI/Button/Button';
import ToolsTitleNavigation from '../../ToolsNavigation/ToolsTitleNavigation/ToolsTitleNavigation';
import ToolsIntroAccordion from '../../ToolsNavigation/ToolsIntroAccordion/ToolsIntroAccordion';

const MoneyCeosBusinessHeader: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const { toastNotification } = useUiContext();
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);

	const [ebitdaInput, setEbitdaInput] = useState<number>(1);
	const [selectedIndustry, setSelectedIndustry] = useState<IndustryModel | undefined>(undefined);
	const financialContext: FinancialsContextModel = useContext(FinancialsContext);
	const navigate = useNavigate();
	const { financials } = environment.frontendRoutes;

	function clickHandler(): void {
		financialContext.setEbitdaHandler(ebitdaInput);
	}
	function arrowUpHandler(): void {
		if (!hasEditPermission(selectedCompany)) {
			toastNotification('info', 'You do not have permission to modify reports');
			return;
		}
		setEbitdaInput((prevState) => +(prevState + 0.1).toFixed(2));
	}
	function arrowDownHandler(): void {
		if (!hasEditPermission(selectedCompany)) {
			toastNotification('info', 'You do not have permission to modify reports');
			return;
		}
		setEbitdaInput((prevState) => {
			if (prevState <= 0.1) {
				return 0;
			}
			return +(prevState - 0.1).toFixed(2);
		});
	}

	useEffect(() => {
		if (selectedCompany && selectedFinancials) {
			if (selectedFinancials.length > 1) {
				findRightIndustryIndexHandler(
					selectedCompany,
					selectedFinancials[1],
					setSelectedIndustry,
					selectedFinancials[0],
					financialContext,
					setEbitdaInput
				);
			} else {
				navigate(financials);
			}
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedCompany, selectedFinancials]);
	function ebitdaInputHandler(event: ChangeEvent<HTMLInputElement>): void {
		if (!hasEditPermission(selectedCompany)) {
			toastNotification('info', 'You do not have permission to modify reports');
			return;
		}
		setEbitdaInput(+event.target.value);
	}

	const accordionContent = `
		<p className="subtitle">What is this for?</p>
		Understand how improving your EBITDA and financial multipliers could{' '}
		<b>grow your business value</b> — instantly and visually.
		<p className="subtitle">What will I get?</p>
		<ul>
			<li>
				A calculated <b>EBITDA multiple</b> based on your sector and size
			</li>
			<li>A clear comparison between your current valuation and your enhanced value</li>
			<li>Visual feedback on how operational decisions can drive valuation growth</li>
		</ul>
		<p className="subtitle">How do I start?</p>
		Review your base multiple → Adjust it using performance levers → Click [Update results]
		to see how your business value evolves
	`;

	return (
		<div className={styles.container}>
			<ToolsTitleNavigation
				title="Valuation Optimiser"
				stepNumber={2}
				maxSteps={2}
				prevAction={{
					title: 'Back to Multiplier Simulator',
					link: environment.frontendRoutes.moneyForCeos
				}}
				introText="How do your cash flow improvements multiply into equity?"
			/>
			{/* <div className={`$"subtitle" ${print ? styles.print : ''}`}>
				<h5>Your EBITDA Multiple</h5>
				<p
					className={`${styles.container__header__title__paragraph2} ${print ? styles.print : ''}`}
				>
					Based on the {selectedIndustry?.name} industry for this company, and your basic valuation
					being below 2M we have calculated your EBITDA multiple to be {ebitdaInput}
				</p>
			</div> */}
			{!print && (
				<ToolsIntroAccordion content={accordionContent} ctaTitle="Explore valuation impact" />
			)}
			{!print && (
				<div className={styles.ebitdaMultiple}>
					<h3>Your EBITDA Multiple</h3>
					<input
						className={styles.ebitdaInput}
						id="priceIncrease"
						onChange={ebitdaInputHandler}
						placeholder="0.00"
						step={0.01}
						type="number"
						value={ebitdaInput}
					/>
					<ArrowSvg clickHandler={arrowUpHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={arrowDownHandler} svgClass={styles.arrowDown} />
					<Button
						id="UpdateResults"
						onClick={clickHandler}
						buttonClass={styles.submitButton}
						type="submit"
						value="Update results"
						link="#"
						svg={<ReloadSvg className={styles.saveButtonIcon} />}
					/>
					{/* <Button className={styles.submitButton} onClick={clickHandler} type="submit">
						<ReloadSvg className={styles.saveButtonIcon} />
						Update results
					</Button> */}
				</div>
			)}
		</div>
	);
};

export default MoneyCeosBusinessHeader;