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

export default function (props: { isOpen: boolean; onClose: () => void }) {
  function reset() {
    (document.getElementById("username") as HTMLInputElement).value = "";
    (document.getElementById("evidence") as HTMLInputElement).value = "";

    props.onClose();
  }

  return (
    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>New Game Ban</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text>Username(s)</Text>
          <Input id="username" placeholder="builderman" />
          <br />
          <br />
          <input id="evidence" type="file" />
        </ModalBody>
      </ModalContent>
      <ModalFooter>
        <Button onClick={reset}>Cancel</Button>
        <Button colorScheme="blue" ml="8px">
          Submit
        </Button>
      </ModalFooter>
    </Modal>
  );
}