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';

interface DropdownForPrefix extends Dropdown {
	open: boolean;
}

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

export default DropdownElement;