import {
  Button,
  Container,
  Heading,
  Input,
  Text,
  Textarea,
  useToast,
} from "@chakra-ui/react";
import { useState } from "react";
import Success from "../../components/Success.js";
import { useLoaderData } from "@remix-run/react";

export function meta() {
  return [
    {
      title: "Admin Application - Car Crushers",
    },
  ];
}

export async function loader({ context }: { context: RequestContext }) {
  const user: { [k: string]: any } = context.data.current_user;

  if (!user)
    throw new Response(null, {
      status: 401,
    });

  return null;
}

export default function () {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const toast = useToast();
  useLoaderData<typeof loader>();

  async function submit() {
    setLoading(true);

    const submitReq = await fetch("/api/admin-apps/submit");
    if (!submitReq.ok) {
      toast({
        title: "Error",
        description:
          "Something went wrong while submitting your application. Try again.",
        status: "error",
      });

      return;
    }

    setLoading(false);
    setSuccess(true);
  }

  return (
    <>
      <Container
        maxW="container.md"
        pt="4vh"
        textAlign="start"
        display={success ? "block" : "none"}
      >
        <Success
          heading={"Application Submitted"}
          message={
            "Your application for admin has been submitted! We'll email you once we've reached a decision."
          }
        ></Success>
      </Container>
      <Container
        maxW="container.md"
        pt="4vh"
        textAlign="start"
        display={success ? "none" : "block"}
      >
        <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()}
          isLoading={loading}
          loadingText="Submitting"
          mt={3}
        >
          Submit
        </Button>
      </Container>
    </>
  );
}