import {
  Button,
  Container,
  Heading,
  ListItem,
  Text,
  UnorderedList,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";

export function meta() {
  return [
    {
      title: "RP Server Application",
    },
  ];
}

export async function loader({ context }: { context: RequestContext }) {
  if (!context.data.current_user)
    throw new Response(null, {
      status: 401,
    });

  return null;
}

export default function () {
  useLoaderData<typeof loader>();

  return (
    <Container maxW="container.md" pt="4vh" textAlign="start">
      <Heading size="xl" pb="32px">
        RP Server Application
      </Heading>
      <Text pb="16px">
        Thanks for your interest in applying to list your server! Before we get
        started, please review our rules.
      </Text>
      <Text>
        Because your server is being listed in ours, we have some ground rules
        that must be followed in order to be accepted. This means:
      </Text>
      <br />
      <UnorderedList>
        <ListItem>Racism and/or discrimination will not be tolerated</ListItem>
        <ListItem>No NSFW/NSFL</ListItem>
        <ListItem>Your server must have a minimum of 30 members</ListItem>
        <ListItem>
          There must be good activity within the server (what exactly is
          considered active enough is determined at our sole discretion)
        </ListItem>
        <ListItem>You must own the server you are applying for (duh)</ListItem>
        <ListItem>
          You must have a clean moderation history in our server (for the last
          90 days)
        </ListItem>
        <ListItem>
          You must have two-factor authentication enabled on your Discord
          account
        </ListItem>
        <ListItem>
          You and your server must otherwise follow Discord's Terms of Service
        </ListItem>
        <ListItem>
          You agree to notify us before making large changes to your server
          (whether it be rules or otherwise)
        </ListItem>
      </UnorderedList>
      <Text py="16px">
        If that sounds fine to you, welcome! We expect you to provide enough
        information for us to identify what your server is about. However, we do
        not want a big wall of text, because we have better things to do with
        our time. English teachers, please restrain yourself, because such walls
        of text are almost guaranteed to be placed in the garbage bin.
      </Text>
      <Button as="a" href="/rpserver/application">
        Continue
      </Button>
    </Container>
  );
}