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

import type { Financials } from './FinancialsHelper';

const FinancialsDropdown = (props: Financials): JSX.Element => {
	const [changeValue, setChangeValue] = React.useState('');

	const handleChange = (event: SelectChangeEvent) => {
		props.handleChange(event);
		setChangeValue(event.target.value);
	};
	return (
		<FormControl
			className={props.class}
			sx={{
				m: 1,
				minWidth: 120
			}}
			variant="standard"
		>
			<InputLabel id="demo-simple-select-standard-label">{props.label}</InputLabel>
			<Select id={props.id} label={props.class} onChange={handleChange} value={changeValue}>
				{props.financials.map((item) => (
					<MenuItem key={item.value} value={item.value}>
						{item.value}
					</MenuItem>
				))}
			</Select>
		</FormControl>
	);
};

export default FinancialsDropdown;