import React, { useState } from "react";
import {
  FormControl,
  MenuItem,
  Select,
  SelectChangeEvent,
} from "@mui/material";
import ArrowDown from "@icons/ArrowDownIcon";
import CustomCheckbox from "./CustomCheckbox";

type CheckboxSelectProps = {
  options: { label: string; value: string }[];
  sx?: any;
  placeholder: string;
};

export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
  options,
  sx,
  placeholder,
}: CheckboxSelectProps) => {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<string[]>) => {
    const values = event.target.value as string[];

    if (values.includes("SelectAll")) {
      setSelectedValues(options.map((option) => option.value));
    } else {
      setSelectedValues(values);
    }
  };

  return (
    <FormControl
      fullWidth
      size="small"
      sx={{ width: "100%", height: "48px", ...sx }}
    >
      <Select
        displayEmpty
        multiple
        value={selectedValues}
        onChange={handleChange}
        sx={{
          width: "100%",
          height: "48px",
          borderRadius: "8px",
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #7E2AEA !important",
            borderRadius: "10px",
          },
        }}
        MenuProps={{
          PaperProps: {
            sx: {
              mt: "8px",
              p: "4px",
              borderRadius: "8px",
              backgroundColor: "#fff",
              border: "1px solid #EEE4FC",
              boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
            },
          },
          MenuListProps: {
            sx: {
              py: 0,
              display: "flex",
              flexDirection: "column",
              gap: "8px",
              "& .Mui-selected": {
                backgroundColor: "#fff",
                color: "#7E2AEA",
              },
            },
          },
        }}
        inputProps={{
          sx: {
            color: "#7E2AEA",
            display: "block",
            px: "9px",
            gap: "20px",
            width: "90%",
          },
        }}
        IconComponent={(props) => <ArrowDown {...props} />}
        renderValue={(selected) => {
          if (selected.length === 0) {
            return <span style={{ color: "#7E2AEA" }}>{placeholder}</span>;
          }

          return (
            <span>
              {options
                .filter((option) => selected.includes(option.value))
                .map((option) => option.label)
                .join(", ")}
            </span>
          );
        }}
      >
        <MenuItem
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
          value="SelectAll"
        >
          <CustomCheckbox
            checked={selectedValues.includes("SelectAll")}
            label="Выбрать всё"
          />
        </MenuItem>
        {options.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            <CustomCheckbox
              sx={{ padding: "0", borderRadius: "6px" }}
              label={option.label}
              checked={selectedValues.includes(option.value)}
            />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};