import {
	Box,
	FormControl,
	MenuItem,
	OutlinedInput,
	Select,
} from "@mui/material";
import React from "react";

import style from "./BuzzMultiSelect.module.css";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
	PaperProps: {
		style: {
			maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
			width: 250,
		},
	},
};

export default function BuzzMultiSelect({
	id,
	label,
	value = [],
	menuList = [],
	onChange,
	valueKey = "value",
	labelKey = "label",
	disabled = false,
}) {
	if (!Array.isArray(menuList)) throw new Error("menuList must be an array");

	return (
		<div className={style.container}>
			<Box className={style.labelRow}>
				<label>{label}</label>
			</Box>
			{/* <InputLabel>{label}</InputLabel> */}
			<FormControl id={id} fullWidth>
				<Select
					id={id}
					size="small"
					className={style.inputBox}
					multiple
					value={value}
					onChange={onChange}
					input={<OutlinedInput />}
					MenuProps={MenuProps}
					disabled={disabled}
				>
					{menuList.map((option, index) => (
						<MenuItem key={index} value={option[valueKey]}>
							{option[labelKey]}
						</MenuItem>
					))}
				</Select>
			</FormControl>
		</div>
	);
}
