"use client";

import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Select,
  Typography,
} from "@mui/material";
import { useCallback, useEffect } from "react";

function CustomSelectByDependency({
  column,
  filterParameters,
  value,
  defaultFilterTranslation,
  handleChange,
  columnSelectOption,
}) {
  return (
    <FormControl fullWidth sx={{ my: 1 }} size="small">
      <InputLabel id={`label${column.id}`} shrink>
        {column.header}
      </InputLabel>
      <Select
        labelId={`label${column.id}`}
        id={column.id}
        name={`${column.id}.value`}
        value={value}
        size="small"
        input={<OutlinedInput label={column.header} />}
        onChange={(e) =>
          handleChange({ ...filterParameters, value: e.target.value })
        }
        displayEmpty
      >
        {columnSelectOption.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default CustomSelectByDependency;
