import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Radio,
  RadioGroup,
  Stack,
  Text,
} from "@chakra-ui/react";
import { useState } from "react";

export default function (props: {
  attachment: string;
  attachment_loading?: boolean;
  reporter?: { [k: string]: any };
  target_ids: number[];
  target_usernames: string[];
}) {
  const targetMap: { [k: number]: string } = {};
  const [attachmentReady, setAttachmentReady] = useState(
    !props.attachment_loading
  );
  const actionMap: { [k: number]: number } = {};

  for (let i = 0; i < props.target_ids.length; i++)
    Object.defineProperty(targetMap, props.target_ids[i], {
      value: props.target_usernames[i],
    });

  async function recheckAttachment() {
    const attachmentCheck = await fetch(`/api/uploads/${props.attachment}`, {
      method: "HEAD",
    });

    setAttachmentReady(attachmentCheck.ok);
  }

  return (
    <Card>
      <CardHeader>
        <Heading size="lg">
          Report for {props.target_usernames.toString()}
        </Heading>
        <Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
      </CardHeader>
      <CardBody>
        {attachmentReady ? (
          <Text>Attachment processing...</Text>
        ) : (
          <video src={`/api/uploads/${props.attachment}`} width="100%" />
        )}
      </CardBody>
      <CardFooter>
        {props.attachment_loading ? (
          <Button
            colorScheme="blue"
            onClick={async () => await recheckAttachment()}
          >
            Reload Attachment
          </Button>
        ) : (
          <Stack direction="column">
            {Object.entries(targetMap).map(([id, username]) => {
              return (
                <RadioGroup
                  name={id}
                  onChange={(val) =>
                    Object.defineProperty(actionMap, parseInt(id), {
                      value: parseInt(val),
                    })
                  }
                >
                  <Stack direction="row">
                    <Text>{username}</Text>
                    <Radio key={0} value="0">
                      Ignore
                    </Radio>
                    <Radio key={1} value="1">
                      Hide from Leaderboards
                    </Radio>
                    <Radio key={2} value="2">
                      Ban
                    </Radio>
                  </Stack>
                </RadioGroup>
              );
            })}
            <Box pt="16px">
              <Button colorScheme="blue">Submit</Button>
            </Box>
          </Stack>
        )}
      </CardFooter>
    </Card>
  );
}