import {
  Button,
  Container,
  Heading,
  HStack,
  Radio,
  RadioGroup,
  Text,
  Textarea,
  useToast,
} from "@chakra-ui/react";
import { useState } from "react";

export default function () {
  const [showCookieBox, setShowCookieBox] = useState(false);
  return (
    <Container maxW="container.md">
      <Heading pt="36px">Let's get started</Heading>
      <Text pt="128px">Is your old Roblox account banned?</Text>
      <RadioGroup onChange={(val) => setShowCookieBox(JSON.parse(val))}>
        <HStack>
          <Radio value="false">No</Radio>
          <Radio value="true">Yes</Radio>
        </HStack>
      </RadioGroup>
      <Textarea
        id="cookie-box"
        placeholder="Paste your .ROBLOSECURITY cookie here"
        pt="16px"
        style={{ display: showCookieBox ? "initial" : "none" }}
      />
      <Button
        onClick={async () => {
          const createTransferReq = await fetch("/api/data-transfers/create", {
            body: JSON.stringify({
              can_access: !showCookieBox,
              cookie: (
                document.getElementById("cookie-box") as HTMLInputElement
              ).value,
            }),
            headers: {
              "content-type": "application/json",
            },
            method: "POST",
          });

          if (!createTransferReq.ok) {
            useToast()({
              description: (
                (await createTransferReq.json()) as { error: string }
              ).error,
              isClosable: true,
              status: "error",
              title: "Failed to create transfer request",
            });

            return;
          }

          location.assign(
            ((await createTransferReq.json()) as { url: string }).url,
          );
        }}
        pt="32px"
      >
        Continue
      </Button>
      <br />
      <Text pt="16px">
        If you cannot login at all, please visit the support page and join our
        server.
      </Text>
    </Container>
  );
}