import {
  Button,
  Container,
  FormControl,
  FormLabel,
  Heading,
  Input,
  NumberDecrementStepper,
  NumberIncrementStepper,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  Textarea,
  VStack,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";

export async function loader({ context }: { context: RequestContext }) {
  const { current_user: user } = context.data;

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

  if (await context.env.DATA.get(`rpserverblock_${user.id}`))
    throw new Response(null, {
      status: 403,
    });

  return null;
}

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

  return (
    <Container maxW="container.md">
      <Heading pb="32px">RP Server Application</Heading>
      <VStack alignItems="start" spacing={12}>
        <FormControl isRequired>
          <FormLabel>Server Invite</FormLabel>
          <Input maxLength={48} placeholder="https://discord.gg/abcdef123456" />
        </FormControl>
        <FormControl isRequired>
          <FormLabel>Roblox Username</FormLabel>
          <Input maxLength={20} placeholder="builderman" />
        </FormControl>
        <FormControl isRequired>
          <FormLabel>How old are you?</FormLabel>
          <NumberInput>
            <NumberInputField />
            <NumberInputStepper>
              <NumberIncrementStepper />
              <NumberDecrementStepper />
            </NumberInputStepper>
          </NumberInput>
        </FormControl>
        <FormControl isRequired>
          <FormLabel>Introduce yourself!</FormLabel>
          <Textarea
            placeholder="Who are you? What do you enjoy doing? Write everything you want us to know about you."
            rows={5}
          />
        </FormControl>
        <FormControl isRequired>
          <FormLabel>What is your RP server about?</FormLabel>
          <Input
            maxLength={256}
            placeholder="This can be just about anything tangentally related to CC2."
          />
        </FormControl>
        <FormControl>
          <FormLabel>Explain the above in more details</FormLabel>
          <Textarea
            placeholder="What are your specific plans for your server?"
            rows={5}
          />
        </FormControl>
        <FormControl>
          <FormLabel>Anything else?</FormLabel>
          <Textarea placeholder="Any questions or comments" rows={5} />
        </FormControl>
        <Button>Submit</Button>
      </VStack>
    </Container>
  );
}