/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/destructuring-assignment */
import { FormControl } from '@mui/material';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import type { SelectChangeEvent } from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import * as React from 'react';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { selectCompany } from '../../../../ReduxState/companies/companiesSlice';
import type { AppDispatch, RootState } from '../../../../ReduxState/store';
import type { CompanyDbModel } from '../../../Companies/Components/CompaniesComponents.helper';

interface SelectValue {
	labelPlaceholder: string;
	className: {
		container: string;
		box: string;
	};
}

const ListOfCompanies = (props: SelectValue): JSX.Element => {
	const [value, setValue] = React.useState<string>('');
	const dispatch: AppDispatch = useDispatch();
	const companies: CompanyDbModel[] | null = useSelector(
		(state: RootState) => state.companies.companiesList
	);
	const selectedCompany: CompanyDbModel | null = useSelector(
		(state: RootState) => state.companies.selectedCompany
	);

	function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
		const companyId = event.target.value as string;
		if (companyId === '') {
			return;
		}
		const selectedCompany = companies?.find((company) => company.company_id === companyId);
		if (selectedCompany) {
			dispatch(selectCompany(selectedCompany));
		}
	}

	useEffect(() => {
		console.log('selectedCompany', selectedCompany);
		if (selectedCompany) {
			setValue(selectedCompany.company_id);
		}
	}, [selectedCompany]);

	return (
		<div className={props.className.container}>
			<FormControl>
				<label>{props.labelPlaceholder}</label>
				<Box
					autoComplete="off"
					className={props.className.box}
					component="form"
					noValidate
					sx={{
						'& .MuiTextField-root': {
							m: 1,
							width: '25ch'
						}
					}}
				>
					<TextField id="outlined-select-currency" onChange={handleChange} select value={value}>
						{companies && companies.length <= 0 ? (
							<MenuItem disabled value="emptyItem">
								Please Create Company
							</MenuItem>
						) : (
							(companies as CompanyDbModel[]).map((option) => (
								<MenuItem
									key={option.company_id}
									value={option.company_id}
									disabled={option.company_id === '-1'}
								>
									{option.company_name}
								</MenuItem>
							))
						)}
					</TextField>
				</Box>
			</FormControl>
		</div>
	);
};

export default ListOfCompanies;