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

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 { GlobalStateModel } from '../../../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../../../Store/global/GlobalState-context';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';
import FinancialsCard from '../UI/FinancialsCard';
import styles from './FinancialsCards.module.scss';

interface FinancialsCardsProps {
	selectedTool: string;
	setSelectedTool: (id: string) => void;
	message?: string;
	color: string;
}

export enum ToolsCards {
	multiplier = 'moneyMultiplier',
	growth = 'moneyForGrowth',
	cashFlow = 'cashFlowAnalysis'
}

const FinancialsCards: React.FC<FinancialsCardsProps> = (
	props: FinancialsCardsProps
): JSX.Element => {
	const { moneyForCeos, moneyForGrowth, cashFlowSummary } = environment.frontendRoutes;
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const [moneyMultiplierRadioButton, setMoneyMultiplierRadioButton] = useState(styles.nonActive);
	const [moneyForGrowthRadioButton, setMoneyForGrowthRadioButton] = useState(styles.active);
	const [cashFlowAnalysisRadioButton, setCashFlowAnalysisRadioButton] = useState(styles.nonActive);
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);

	const selectedCompany: CompanyDbModel | null = useSelector(
		(state: RootState) => state.companies.selectedCompany
	);

	const setActiveTool = (id: string | undefined) => {
		if (id) {
			props.setSelectedTool(id);
			if (id === ToolsCards.multiplier) {
				financialsContext.isCheckedCardHandler(id);
				setMoneyMultiplierRadioButton(styles.active);
				setMoneyForGrowthRadioButton(styles.nonActive);
				setCashFlowAnalysisRadioButton(styles.nonActive);
			} else if (id === ToolsCards.growth) {
				financialsContext.isCheckedCardHandler(id);
				setMoneyMultiplierRadioButton(styles.nonActive);
				setMoneyForGrowthRadioButton(styles.active);
				setCashFlowAnalysisRadioButton(styles.nonActive);
			} else if (id === ToolsCards.cashFlow) {
				financialsContext.isCheckedCardHandler(id);
				setMoneyMultiplierRadioButton(styles.nonActive);
				setMoneyForGrowthRadioButton(styles.nonActive);
				setCashFlowAnalysisRadioButton(styles.active);
			}
		}
	};

	function nextButtonHandler(event: FormEvent): void {
		event.preventDefault();
		financialsContext.nextButtonHandler();
		globalContext.getSelectedFinancials();
	}

	function changeClassHandler(event: FormEvent): void {
		console.log('changing class handler');
		const id = event.currentTarget.children.item(1)?.id;
		setActiveTool(id);
	}

	useEffect(() => {
		setActiveTool(props.selectedTool);
	}, [props.selectedTool]);

	return (
		<div className={styles.cardsContainer}>
			<div className="h3">
				Select a tool to analyse your financials
				<br />
				{/* Please make sure you have added the correct number of financials, as indicated. */}
				{/* <span className={`${styles[props.color]}`}>{props.message}</span> */}
			</div>
			<form className={styles.form}>
				<div className={styles.card}>
					<FinancialsCard
						cardContainer={styles.cardContainer}
						content={
							'<p style="min-height: 50px; font-size: 1.00rem;"><b>What cash are you generating?</b></p><p style="min-height: 105px;">A hands-on simulator that shows how smarter decisions around pricing, costs, and working capital can unlock more cash and long-term value.</p>'
						}
						footerText="Requires at least 2 sets of financials"
						label="Money Multiplier for CEOs"
						onChange={changeClassHandler}
						onClick={changeClassHandler}
						radioButtonClass={moneyMultiplierRadioButton}
						radioId="moneyMultiplier"
						radioName="moneyMultiplier"
						radioValue="moneyMultiplier"
					/>
					<FinancialsCard
						cardContainer={styles.cardContainer}
						content={
							'<p style="min-height: 50px; font-size: 1.00rem;"><b>How is cash used?</b></p><p style="min-height: 105px;">A practical planner that helps you forecast how fast you can grow without running out of cash — and what funding you’ll need along the way.</p>'
						}
						footerText="Requires at least 1 set of financials"
						label="Money for Growth"
						onChange={changeClassHandler}
						onClick={changeClassHandler}
						radioButtonClass={moneyForGrowthRadioButton}
						radioId="moneyForGrowth"
						radioName="moneyForGrowth"
						radioValue="moneyForGrowth"
					/>
					{selectedCompany && (selectedCompany.plan.id === 1 || selectedCompany.plan.id >= 3) && (
						<FinancialsCard
							cardContainer={styles.cardContainer}
							content={
								'<p style="min-height: 50px; font-size: 1.00rem;"><b>Where does cash comes from?</b></p><p style="min-height: 105px;">Diagnostic, insight-driven set of tools that reveal where your cash really comes from—and where it’s getting stuck.</p>'
							}
							footerText="Requires at least 3 sets of financials"
							label="Cash Flow Analytics"
							onChange={changeClassHandler}
							onClick={changeClassHandler}
							radioButtonClass={cashFlowAnalysisRadioButton}
							radioId="cashFlowAnalysis"
							radioName="cashFlowAnalysis"
							radioValue="cashFlowAnalysis"
						/>
					)}
				</div>
			</form>
		</div>
	);
};

export default FinancialsCards;