"use client";

import {
  Box,
  Chip,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Select,
  Typography,
} from "@mui/material";

function CustomSelectMultiple({ item, filterParameters, handleChange }) {
  const selectOption = item.selectOption;

  const getLabelForValue = (value) => {
    const option = selectOption.find((opt) => opt.value === value);
    return option ? option.label : value;
  };

  return (
    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
      <InputLabel htmlFor="uncontrolled-native" id={`label${item.id}`}>
        {item.header}
      </InputLabel>
      <Select
        labelId={`label${item.id}`}
        id={item.id}
        value={filterParameters.value}
        multiple
        size="small"
        onChange={(e) =>
          handleChange({ ...filterParameters, value: e.target.value })
        }
        renderValue={(selected) => (
          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
            {selected.map((value) => (
              <Chip key={value} label={getLabelForValue(value)} />
            ))}
          </Box>
        )}
        input={<OutlinedInput label={item.header} />}
        InputLabelProps={{ shrink: true }}
      >
        {selectOption.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default CustomSelectMultiple;
