import {
  Button,
  HStack,
  Input,
  Link,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Radio,
  RadioGroup,
  Table,
  TableContainer,
  Tbody,
  Text,
  Td,
  Th,
  Thead,
  Tr,
  useToast,
} from "@chakra-ui/react";
import { useState } from "react";

export default function (props: { isOpen: boolean; onClose: () => void }) {
  const actionMap: { [k: string]: number } = {};
  const [rows, setRows] = useState([] as JSX.Element[]);

  function addUser(user: string) {
    const newRows = [...rows];
    newRows.push(
      <Tr key={user}>
        <Td>{user}</Td>
        <Td>
          <RadioGroup
            onChange={(val) =>
              Object.defineProperty(actionMap, user, {
                value: parseInt(val),
              })
            }
          >
            <HStack>
              <Radio value="0">Do Nothing</Radio>
              <Radio value="1">Hide from Leaderboards</Radio>
              <Radio value="2">Ban</Radio>
            </HStack>
          </RadioGroup>
        </Td>
        <Td>
          <Link onClick={() => removeUser(user)}>Remove</Link>
        </Td>
      </Tr>
    );
  }

  function removeUser(user: string) {
    const newRows = [...rows];
    const el = newRows.find((el) => el.key === user);

    if (!el) return;

    const elIdx = newRows.indexOf(el);

    if (elIdx === -1) return;

    newRows.splice(elIdx, 1);
    setRows(newRows);

    delete actionMap[user];
  }

  function reset() {
    (document.getElementById("username") as HTMLInputElement).value = "";
    (document.getElementById("evidence") as HTMLInputElement).value = "";

    setRows([]);
    Object.keys(actionMap).forEach((k) => delete actionMap[k]);

    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" mb="8px" placeholder="builderman" />
          <Button
            onClick={function () {
              const user = (
                document.getElementById("username") as HTMLInputElement
              ).value;

              if (
                !user ||
                user.length > 3 ||
                user.length < 20 ||
                user.match(/_/g)?.length ||
                0 > 1 ||
                user.match(/\W/)
              ) {
                useToast()({
                  description: "Check the username and try again",
                  duration: 5000,
                  isClosable: true,
                  status: "error",
                  title: "Invalid Username",
                });
                return;
              }

              addUser(user);
            }}
          >
            Add
          </Button>
          <br />
          <br />
          <TableContainer>
            <Table variant="simple">
              <Thead>
                <Tr>
                  <Th>Username</Th>
                  <Th>Punishment</Th>
                  <Th>Remove</Th>
                </Tr>
              </Thead>
              <Tbody>{rows}</Tbody>
            </Table>
          </TableContainer>
          <br />
          <br />
          <Text>Evidence</Text>
          <Button
            mr="8px"
            onClick={() => document.getElementById("evidence")?.click()}
          >
            Select Files
          </Button>
          <input id="evidence" type="file" />
        </ModalBody>
      </ModalContent>
      <ModalFooter>
        <Button onClick={reset}>Cancel</Button>
        <Button colorScheme="blue" ml="8px">
          Submit
        </Button>
      </ModalFooter>
    </Modal>
  );
}