import OutlinedInput from "@mui/material/OutlinedInput";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { styleTextSelectRight } from "@/mui";
import IconMultipleSelect from "@/components/icons/IconMultipleSelect";

export default function MultipleSelect({ value, updateData, name, list }) {
  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    const newVal = typeof value === "string" ? value.split(",") : value;
    updateData(newVal, "value", name);
  };

  return (
    <div className="auto-complete-selector w-full">
      <Select
        multiple
        displayEmpty
        value={value}
        onChange={handleChange}
        input={<OutlinedInput />}
        IconComponent={IconMultipleSelect}
        className=""
        sx={{
          ...styleTextSelectRight,
          width: "100% !important",
          "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
          "& .MuiInputBase-root": {
            borderRadius: 2,
            padding: "0 !important",
            height: {
              xs: "43px !important",
              sm: "43px !important",
              md: "46px !important",
              lg: "48px !important",
            },
          },
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #D7D7D7",
          },
          "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
            {
              borderColor: "#D7D7D7 !important",
            },
          "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
            {
              border: "1px solid #5559CE !important",
            },
        }}
      >
        {list.map((item) => (
          <MenuItem
            key={item.id || item.uuid}
            value={item.id}
            selected={value.includes(item.id)}
            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] ${ value.includes(item.id) ? "dark:!bg-[#35343D] !bg-[#F1F1F1]" : "dark:!bg-[#1F1D2B] !bg-[#FFF]" } hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
          >
            {item.name || item.label}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
}