/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable react/destructuring-assignment */
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';

interface SelectValue {
	placeholder: string;
	arrayValue: { value: string; label: string }[];
	changeSelectHandler: (event: SelectChangeEvent) => void;
	value: string;
	classNameBox: string;
	selectDropdown: string;
}

const SelectDropdown = (props: SelectValue): JSX.Element => {
	const [value, setValue] = React.useState<string>(props.value);

	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		setValue(event.target.value as string);
		props.changeSelectHandler(event);
	};

	return (
		<div className={props.selectDropdown}>
			<label>{props.placeholder}</label>
			<Box
				autoComplete="off"
				className={props.classNameBox}
				component="form"
				noValidate
				sx={{
					'& .MuiTextField-root': {
						m: 1,
						width: '25ch'
					}
				}}
			>
				<TextField
					id="outlined-select-currency"
					label=""
					onChange={handleChange}
					select
					value={value}
				>
					{props.arrayValue.map((option) => (
						<MenuItem key={option.value} value={option.value}>
							{option.label}
						</MenuItem>
					))}
				</TextField>
			</Box>
		</div>
	);
};

export default SelectDropdown;