import React, {
 ChangeEvent, FormEvent, useContext
} from 'react';
import { Button } from '@mui/material';
import { SelectChangeEvent } from '@mui/material/Select';
import { useNavigate } from 'react-router-dom';
import selectValueArray, { AddCompany } from '../Companies.helper';
import SelectDropdown from './CustomSelect';
import SaveButtonSvg from '../../Financials/Components/UI/SaveButtonSvg';
import AccountInput from '../../Account/Pages/PersonalPreferences/Components/AccountInput';
import { CompaniesContext, CompanyContextModel } from '../../../Store/Companies/company-context-helper';
import { GlobalStateContext, GlobalStateModel } from '../../../Store/global/GlobalState-context';

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
				classNameContainer={ [props.inputContainerClassName, companyContext.errorMessage.companyName].join(' ') }
				label={ 'Company Name' }
				type={ 'text' } id={ '' }
				placeholder={ 'Company Name' }
				inputValue={companyContext.companyName}
				changeHandler={onChangeInputHandler}
				disabled={false}
			/>
			<SelectDropdown
				arrayValue={ selectValueArray.industry }
				placeholder={ 'Select industry*' }
				changeSelectHandler={industryHandler}
				value={companyContext.industry}
				classNameBox={[props.selectBox, companyContext.errorMessage.industryType].join(' ')}
				selectDropdown={props.selectContainer}
			/>
			<SelectDropdown
				arrayValue={ selectValueArray.industryType }
				placeholder={ 'Industry type' }
				changeSelectHandler={industryTypeHandler}
				value={companyContext.industryType}
				classNameBox={props.selectBox}
				selectDropdown={props.selectContainer}
			/>
			<SelectDropdown
				arrayValue={ selectValueArray.currency }
				placeholder={ 'Currency Symbol' }
				changeSelectHandler={currencyHandler}
				value={companyContext.currency}
				classNameBox={props.selectBox}
				selectDropdown={props.selectContainer}
			/>
				<AccountInput
						classNameContainer={ [props.inputContainerClassName, companyContext.errorMessage.companyName].join(' ') }
						label={ 'Company reg. number' }
						type={ 'text' } id={ '' }
						placeholder={ '010101010101' }
						inputValue={companyContext.companyRegNumber}
						changeHandler={onChangeCompanyRegNumberHandler}
						disabled={false}
				/>
				<AccountInput
						classNameContainer={ [props.inputContainerClassName, companyContext.errorMessage.companyName].join(' ') }
						label={ 'Subscriber' }
						type={ 'text' } id={ '' }
						placeholder={ 'Name Surname' }
						inputValue={companyContext.subscriber}
						changeHandler={subscriberHandler}
						disabled={true}
				/>
		</div>
			<div className={props.saveCancelButtons}>
		{!companyContext.editMode && <Button onClick={submitHandler} type={ 'submit' } className={ props.submitButton }>{
			<SaveButtonSvg class={ props.saveButtonIcon } />
		}Save</Button>}
		{companyContext.editMode && <Button onClick={saveEditedItem} type={ 'submit' } className={ props.submitButton }>{
			<SaveButtonSvg class={ props.saveButtonIcon } />
		}Edit</Button>}
		<Button onClick={cancelHandler} type={ 'reset' } className={ props.cancelButton }>{
		}Cancel</Button>
			</div>
	</div>;
};

export default AddNewCompany;