import {
  Button,
  Container,
  Heading,
  Input,
  Text,
  Textarea,
  useToast,
} from "@chakra-ui/react";

export default function () {
  async function submit() {
    const submitReq = await fetch("/api/admin-apps/submit");

    useToast()({
      description: submitReq.ok
        ? "Your application was submitted"
        : "Try again later",
      duration: 10000,
      isClosable: true,
      status: submitReq.ok ? "success" : "error",
      title: submitReq.ok ? "Success" : "Unknown Error",
    });
  }

  return (
    <Container maxW="container.md" pt="4vh" textAlign="start">
      <Heading size="xl">Admin Application</Heading>
      <br />
      <br />
      <Text fontSize="md">Why do you want to be an admin?</Text>
      <br />
      <Textarea
        maxLength={2000}
        placeholder="Explain why you want to be an admin. This should be at least a few sentences."
      />
      <br />
      <br />
      <br />
      <Text fontSize="md">
        How long have you been in the Car Crushers community?
      </Text>
      <br />
      <Input maxLength={40} placeholder="Your response" />
      <br />
      <br />
      <br />
      <Text fontSize="md">
        Explain why you are a better candidate than someone else.
      </Text>
      <br />
      <Textarea
        maxLength={2000}
        placeholder="Explain why you are a better candidate. This should be at least a few sentences."
      />
      <br />
      <br />
      <br />
      <Text fontSize="md">
        Describe yourself from a third-person point-of-view.
      </Text>
      <br />
      <Textarea
        maxLength={1000}
        placeholder="Describe yourself from a third-person view in a few sentences."
      />
      <br />
      <br />
      <br />
      <Text fontSize="md">
        If you have any comments or questions, type them here.
      </Text>
      <br />
      <Textarea maxLength={1000} placeholder="Comments and questions go here" />
      <br />
      <br />
      <br />
      <span>
        By submitting this form, you agree to the{" "}
        <a href="/terms">Terms of Service</a> and{" "}
        <a href="/privacy">Privacy Policy</a>.
      </span>
      <br />
      <Button onClick={async () => await submit()}>Submit</Button>
    </Container>
  );
}