/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/destructuring-assignment */
import { Button } from '@mui/material';
import type { SelectChangeEvent } from '@mui/material/Select';
import type { ChangeEvent, FormEvent } from 'react';
import type React from 'react';
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';

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 AccountInput from '../../Account/Pages/PersonalPreferences/Components/AccountInput';
import SaveButtonSvg from '../../Financials/Components/UI/SaveButtonSvg';
import type { AddCompany } from '../Companies.helper';
import companyDropdownPredefinedValues from '../Companies.helper';
import SelectDropdown from './CustomSelect';

export type AddCompanyModel = {
	company_id: string | null;
	company_name: string | number | readonly string[] | undefined;
	industry_id: number | null;
	industry_type: string | null;
	currency_symbol: string | null;
	company_reg_number: number | number;
};

const AddNewCompany: React.FC<AddCompany> = (props: AddCompany): JSX.Element => {
	const companyContext: CompanyContextModel = useContext(CompaniesContext);
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);
	const navigate = useNavigate();

	function onChangeInputHandler(event: ChangeEvent<HTMLInputElement>): void {
		props.companyNameHandler(event);
		companyContext.companyNameHandler(event);
	}
	function onChangeCompanyRegNumberHandler(event: ChangeEvent<HTMLInputElement>): void {
		props.companyRegNumberHandler(+event.target.value);
		companyContext.companyRegNumberHandler(event);
	}
	function subscriberHandler(event: ChangeEvent<HTMLInputElement>): void {
		props.subscriberHandler(event.target.value);
		companyContext.subscriberHandler(event);
	}
	function industryHandler(event: SelectChangeEvent<string>): void {
		companyContext.industryHandler(event);
	}
	function industryTypeHandler(event: SelectChangeEvent): void {
		companyContext.industryTypeHandler(event);
	}
	function currencyHandler(event: SelectChangeEvent): void {
		companyContext.currencyHandler(event);
	}

	async function submitHandler(event: FormEvent) {
		event.preventDefault();
		const isAdded = await companyContext.addNewCompany();
		console.log('is added', isAdded);
		// props.switchToList(false);
		// TOREVIEW: already called in companyContext.addNewCompany()
		// globalContext.getCompaniesHandler();
		props.switchToList(false);
		// TOREVIEW: you must not navigate until you are sure the addNewCompany process is completed
		console.log('Navigting to manage subscriptions!!!');
		setTimeout(() => {
			navigate('/manageSubscriptions');
		}, 100);
	}
	function saveEditedItem(event: FormEvent): void {
		event.preventDefault();
		companyContext.saveEditedCompany();
		// props.switchToList(false);
		globalContext.getCompaniesHandler();
	}
	function cancelHandler(event: FormEvent): void {
		event.preventDefault();
		props.switchToList(false);
	}
	return (
		<div className={props.container} onBlur={companyContext.resetErrorMessageHandler}>
			<h3>{props.title}</h3>
			<div className={props.formGroup}>
				<AccountInput
					changeHandler={onChangeInputHandler}
					classNameContainer={[
						props.inputContainerClassName,
						companyContext.errorMessage.companyName
					].join(' ')}
					disabled={false}
					id=""
					inputValue={companyContext.companyName}
					label="Company Name"
					placeholder="Company Name"
					type="text"
				/>
				<SelectDropdown
					arrayValue={companyDropdownPredefinedValues.industry}
					changeSelectHandler={industryHandler}
					classNameBox={[props.selectBox, companyContext.errorMessage.industryType].join(' ')}
					placeholder="Select industry*"
					selectDropdown={props.selectContainer}
					value={companyContext.industry}
				/>
				<SelectDropdown
					arrayValue={companyDropdownPredefinedValues.industryType}
					changeSelectHandler={industryTypeHandler}
					classNameBox={props.selectBox}
					placeholder="Industry type"
					selectDropdown={props.selectContainer}
					value={companyContext.industryType}
				/>
				<SelectDropdown
					arrayValue={companyDropdownPredefinedValues.currency}
					changeSelectHandler={currencyHandler}
					classNameBox={props.selectBox}
					placeholder="Currency Symbol"
					selectDropdown={props.selectContainer}
					value={companyContext.currency}
				/>
				<AccountInput
					changeHandler={onChangeCompanyRegNumberHandler}
					classNameContainer={[
						props.inputContainerClassName,
						companyContext.errorMessage.companyName
					].join(' ')}
					disabled={false}
					id=""
					inputValue={companyContext.companyRegNumber}
					label="Company reg. number"
					placeholder="010101010101"
					type="text"
				/>
				<AccountInput
					changeHandler={subscriberHandler}
					classNameContainer={[
						props.inputContainerClassName,
						companyContext.errorMessage.companyName
					].join(' ')}
					disabled
					id=""
					inputValue={companyContext.subscriber}
					label="Subscriber"
					placeholder="Name Surname"
					type="text"
				/>
			</div>
			<div className={props.saveCancelButtons}>
				{!companyContext.editMode && (
					<Button className={props.submitButton} onClick={submitHandler} type="submit">
						<SaveButtonSvg class={props.saveButtonIcon} />
						Save
					</Button>
				)}
				{companyContext.editMode && (
					<Button className={props.submitButton} onClick={saveEditedItem} type="submit">
						<SaveButtonSvg class={props.saveButtonIcon} />
						Edit
					</Button>
				)}
				<Button className={props.cancelButton} onClick={cancelHandler} type="reset">
					{}Cancel
				</Button>
			</div>
		</div>
	);
};

export default AddNewCompany;