import * as React from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
// import ListItemText from "@mui/material/ListItemText";
import Select from "@mui/material/Select";
// import Checkbox from "@mui/material/Checkbox";
import { PropTypes } from "prop-types";
import { ListItemText } from "@mui/material";

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

export const SelectCheck = ({
  label,
  id,
  options,
  error,
  onBlur,
  onChange,
  size,
  value,
  width,
  defaultValue,
}) => {
  defaultValue = defaultValue || [];
  const [myValue, setMyValue] = React.useState(defaultValue);
  width = width || 280;
  // React.useEffect(() => {
  //   if (Array.isArray(value) && !myValue?.length) {
  //     setMyValue(value);
  //   }
  // }, [value]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setMyValue(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };

  React.useEffect(() => {
    onChange(myValue);
  }, [myValue]);

  React.useEffect(() => {
    if (defaultValue?.length) {
      setMyValue(myValue);
    }
  }, [defaultValue]);

  const optionValues = options?.map((item) => item.value);
  const optionLabels = options?.map((item) => item.label);

  return (
    <div>
      <FormControl sx={{ width }} size={size}>
        <InputLabel id="demo-multiple-checkbox-label">{label}</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id={id}
          multiple
          value={myValue}
          onChange={handleChange}
          input={<OutlinedInput label={label} />}
          renderValue={(selected) => {
            const selectedLabels = selected?.map(
              (item) => optionLabels[optionValues.indexOf(item)]
            );
            return selectedLabels.join(", ");
          }}
          MenuProps={MenuProps}
          error={error}
          onBlur={onBlur}
        >
          {options?.map((item) => (
            <MenuItem
              key={item.label}
              value={item.value}
              style={{ display: "flex", padding: 0 }}
            >
              {/* <FormControlLabel
                control={
                  <Checkbox checked={myValue?.indexOf(item.value) > -1} />
                }
                label={item.label}
              /> */}

              {/* <Checkbox checked={myValue?.indexOf(item.value) > -1} /> */}
              <ListItemText
                style={{
                  backgroundColor:
                    myValue?.indexOf(item.value) > -1 ? "lightgray" : "initial",
                  padding: 8,
                }}
                primary={item.label}
              />
              {/* {item.label} */}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
};

SelectCheck.propTypes = {
  label: PropTypes.string,
  id: PropTypes.string,
  options: PropTypes.array,
  error: PropTypes.any,
  onBlur: PropTypes.any,
  onChange: PropTypes.any,
  size: PropTypes.any,
};
