/* eslint-disable react/jsx-no-bind */
import { Button } from '@mui/material';
import type { ChangeEvent, FormEvent } from 'react';
import type React from 'react';
import { useContext, useState } from 'react';
import { Link } from 'react-router-dom';

import InsightsHeader from '../../Components/Layout/Header/InsightsHeader';
import environment from '../../Environments/environment';
import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
import FinancialsCard from '../Financials/Components/UI/FinancialsCard';
import styles from './Tools.module.scss';

const Tools: React.FC = (): JSX.Element => {
	const { moneyForCeos, moneyForGrowth, cashFlowSummary } = environment.frontendRoutes;
	const [checked, setChecked] = useState<boolean>(false);
	const [selectRadioButton1, setSelectedRadioButton1] = useState(styles.radioButtonPrimary);
	const [selectRadioButton2, setSelectedRadioButton2] = useState(styles.radioButtonSecondary);
	const [selectRadioButton3, setSelectedRadioButton3] = useState(styles.radioButtonSecondary);
	const [linkTo, setLinkTo] = useState<string>(moneyForCeos);
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);

	function changeClassHandler(event: ChangeEvent<HTMLInputElement>): void {
		if (event.target.value === 'moneyMultiplier') {
			setSelectedRadioButton2(styles.radioButtonSecondary);
			setSelectedRadioButton1(styles.radioButtonPrimary);
			setSelectedRadioButton3(styles.radioButtonSecondary);
			setLinkTo(moneyForCeos);
		} else if (event.target.value === 'moneyForGrowth') {
			setSelectedRadioButton2(styles.radioButtonPrimary);
			setSelectedRadioButton1(styles.radioButtonSecondary);
			setSelectedRadioButton3(styles.radioButtonSecondary);
			setLinkTo(moneyForGrowth);
		} else if (event.target.value === 'cashFlowPicture') {
			setSelectedRadioButton2(styles.radioButtonSecondary);
			setSelectedRadioButton1(styles.radioButtonSecondary);
			setSelectedRadioButton3(styles.radioButtonPrimary);
			setLinkTo(cashFlowSummary);
		}
		setChecked(!checked);
	}

	function clickHandler(event: FormEvent): void {
		const clickedItem = event.currentTarget.childNodes[0].textContent;
		if (clickedItem === 'Money Multiplier for CEOs') {
			setSelectedRadioButton2(styles.radioButtonSecondary);
			setSelectedRadioButton1(styles.radioButtonPrimary);
			setSelectedRadioButton3(styles.radioButtonSecondary);
			setLinkTo(moneyForCeos);
		} else if (clickedItem === 'Money for Growth') {
			setSelectedRadioButton2(styles.radioButtonPrimary);
			setSelectedRadioButton1(styles.radioButtonSecondary);
			setSelectedRadioButton3(styles.radioButtonSecondary);
			setLinkTo(moneyForGrowth);
		} else if (clickedItem === 'Cash Flow Analytics') {
			setSelectedRadioButton2(styles.radioButtonSecondary);
			setSelectedRadioButton1(styles.radioButtonSecondary);
			setSelectedRadioButton3(styles.radioButtonPrimary);
			setLinkTo(cashFlowSummary);
		}
	}

	return (
		<div className={styles.container}>
			<div className={styles.body}>
				<InsightsHeader numberOfButtons={1} title="Tools" />
				<div className="h3">
					Please select one tool below to see your financials.
					<br />
					Please make sure you have added the correct number of financials, as indicated.
				</div>
				<div className={styles.containerCard}>
					<form className={styles.form}>
						<div className={styles.card}>
							<FinancialsCard
								cardContainer={styles.cardContainer}
								content={
									'An automated tool for calculating the impact of ' +
									'any change or decision on your cash and profit.'
								}
								footerText="2 sets required"
								label="Money Multiplier for CEOs"
								onChange={changeClassHandler}
								onClick={clickHandler}
								radioButtonClass={selectRadioButton1}
								radioId="moneyMultiplier"
								radioName="moneyMultiplier"
								radioValue="moneyMultiplier"
							/>
							<FinancialsCard
								cardContainer={styles.cardContainer}
								content={
									'An automated tool for measuring the financial health ' +
									'of your business - cash flow perspective.'
								}
								footerText="1 set required"
								label="Money for Growth"
								onChange={changeClassHandler}
								onClick={clickHandler}
								radioButtonClass={selectRadioButton2}
								radioId="moneyForGrowth"
								radioName="moneyForGrowth"
								radioValue="moneyForGrowth"
							/>
							{globalContext.companyPlan !== 2 && (
								<FinancialsCard
									cardContainer={styles.cardContainer}
									content={
										'An automated tool for creating your cash flow picture.' +
										'This picture shows every segment of your business where money ' +
										'touches and tells you what you need to fix, so you can make more money.'
									}
									footerText="3 sets required"
									label="Cash Flow Analytics"
									onChange={changeClassHandler}
									onClick={clickHandler}
									radioButtonClass={selectRadioButton3}
									radioId="cashFlowPicture"
									radioName="cashFlowPicture"
									radioValue="cashFlowPicture"
								/>
							)}
						</div>
					</form>
				</div>
				<Link className={styles.submitButtonLink} to={linkTo}>
					<Button className={styles.submitButton} type="submit" variant="contained">
						Next
					</Button>
				</Link>
			</div>
			{/* <ProgressBar/> */}
		</div>
	);
};

export default Tools;