import {
  Checkbox,
  CheckboxGroup,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
  VStack,
} from "@chakra-ui/react";
import { useState } from "react";

export default function (props: {
  departments: string[];
  isOpen: boolean;
  onClose: () => void;
}) {
  const [departments, setDepartments] = useState([] as string[]);
  function reset() {
    (document.getElementById("start") as HTMLInputElement).value = "";
    (document.getElementById("end") as HTMLInputElement).value = "";
    (document.getElementById("reason") as HTMLTextAreaElement).value = "";

    props.onClose();
  }

  async function submit() {
    const start = (document.getElementById("start") as HTMLInputElement).value;
    const end = (document.getElementById("start") as HTMLInputElement).value;
    const reason = (document.getElementById("reason") as HTMLTextAreaElement)
      .value;
  }

  return (
    <>
      <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>New Inactivity Notice</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>Start Date</Text>
            <input id="start" type="date" />
            <br />
            <br />
            <Text>End Date</Text>
            <input id="end" type="date" />
            <br />
            <br />
            <Text>Reason</Text>
            <Textarea
              id="reason"
              placeholder="Your reason for making this inactivity notice"
            />
            <br />
            <br />
            <CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
              <VStack>
                {props.departments.map((d) => (
                  <Checkbox key={d} value={d}>
                    {d}
                  </Checkbox>
                ))}
              </VStack>
            </CheckboxGroup>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}