import {
  Button,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Select,
  Text,
} from "@chakra-ui/react";

export default function (props: { isOpen: boolean; onClose: () => void }) {
  function reset() {
    (
      document.getElementById("punishment") as unknown as HTMLSelectElement
    ).selectedIndex = -1;
    (document.getElementById("user") as HTMLInputElement).value = "";
    (document.getElementById("evidence") as HTMLInputElement).value = "";

    props.onClose();
  }
  async function submit() {}

  return (
    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>New Infraction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text>User ID</Text>
          <Input id="user" placeholder="1234567890987654321" />
          <br />
          <br />
          <Text>Punishment</Text>
          <Select id="punishment" placeholder="Select punishment">
            <option value="verbal">Verbal Warning</option>
            <option value="warn">Warning</option>
            <option value="mute">Mute</option>
            <option value="ban_temp">Temporary Ban</option>
            <option value="ban_perm">Permanent Ban</option>
            <option value="ban_unappealable">Unappealable Permanent Ban</option>
          </Select>
          <br />
          <br />
          <Text>Evidence</Text>
          <Button>Select Files</Button>
          <input id="evidence" multiple type="file" />
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="ghost" onClick={reset}>
            Cancel
          </Button>
          <Button
            colorScheme="blue"
            ml="8px"
            onClick={async () => await submit()}
          >
            Submit
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}