/* eslint-disable react/destructuring-assignment */
import { FormControl, MenuItem, Select } from '@mui/material';
import type React from 'react';
import { useDeferredValue } from 'react';

import styles from './Dropdown.module.scss';
import type { Dropdown } from './DropdownHelper';

const DropdownElement: React.FC<Dropdown> = (props: Dropdown): JSX.Element => {
	const deferredValue = useDeferredValue(props.items);
	return (
		<FormControl
			className={[styles.dropdown, props.labelInputInline ? styles.inline : ''].join(' ')}
			fullWidth
		>
			{/* <InputLabel id="demo-simple-select-label"> </InputLabel> */}
			<label htmlFor={props.id}>{props.label}</label>
			<Select
				className={props.classNameContainer ? props.classNameContainer : ''}
				id={props.id}
				label=" "
				labelId=" "
				onChange={props.handleChange}
				sx={{
					boxShadow: '0 3px 13px 0 #1f1f2126',
					'.MuiOutlinedInput-notchedOutline': {
						border: 0
					}
				}}
				value={props.value}
			>
				{deferredValue.map((item, idx) => (
					// eslint-disable-next-line react/no-array-index-key
					<MenuItem key={idx} value={item.value}>
						{item.label}
					</MenuItem>
				))}
			</Select>
		</FormControl>
	);
};

export default DropdownElement;