import { useState } from "react";

import {
  Button,
  Checkbox,
  FormControl,
  ListItemText,
  MenuItem,
  Select,
  SelectChangeEvent,
  TextField,
} from "@mui/material";
import { MOCK_DATA_USERS } from "@root/api/roles";

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

export default function CreateForm() {
  const [personName, setPersonName] = useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
    const {
      target: { value },
    } = event;
    setPersonName(typeof value === "string" ? value.split(",") : value);
  };

  return (
    <>
      <TextField
        placeholder="название"
        fullWidth
        sx={{
          alignItems: "center",
          width: "400px",
          "& .MuiInputBase-root": {
            backgroundColor: "#F2F3F7",
            height: "48px",
          },
        }}
        inputProps={{
          sx: {
            borderRadius: "10px",
            fontSize: "18px",
            lineHeight: "21px",
            py: 0,
          },
        }}
      />
      <Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
      <FormControl sx={{ ml: "25px", width: "80%" }}>
        <Select
          sx={{ bgcolor: "white", height: "48px" }}
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={personName}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {MOCK_DATA_USERS.map(({ name, id }) => (
            <MenuItem key={id} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
}