import {
  Box,
  Container,
  Flex,
  Select,
  useBreakpointValue,
  useToast,
  VStack,
} from "@chakra-ui/react";
import { lazy, useState } from "react";
const AppealCard = lazy(() => import("../components/AppealCard"));

export function Page(pageProps: { [p: string]: any }) {
  const isDesktop = useBreakpointValue({ base: false, lg: true });
  const entryTypes = [];
  const [entries, setEntries] = useState([] as JSX.Element[]);

  for (const type of pageProps.entry_types)
    entryTypes.push(<option value={type.value}>{type.name}</option>);

  async function updateQueue(
    queue_type: string,
    show_closed: boolean = false
  ): Promise<void> {
    const queueReq = await fetch(
      `/api/mod-queue/list?type=${queue_type}&showClosed=${show_closed}`
    );

    if (!queueReq.ok) {
      const errorData: { error: string } = await queueReq.json();

      useToast()({
        description: errorData.error,
        duration: 10000,
        isClosable: true,
        status: "error",
        title: "Failed to load queue",
      });

      return;
    }

    const entryData: { [k: string]: any }[] = await queueReq.json();
    const newEntries = [];

    for (const entry of entryData) {
      switch (queue_type) {
        case "appeal":
          newEntries.push(
            <AppealCard
              {...(entry as {
                ban_reason: string;
                createdAt: number;
                discriminator: string;
                id: string;
                learned: string;
                reason_for_unban: string;
                username: string;
              })}
            />
          );
      }
    }

    setEntries(newEntries);
  }

  return (
    <Container maxW="container.xl">
      <Flex>
        <VStack>{entries}</VStack>
        <Box display={isDesktop ? undefined : "none"} w="250px">
          <Select placeholder="Entry Type">
            <option value="">All</option>
            {entryTypes}
          </Select>
        </Box>
      </Flex>
    </Container>
  );
}
export const title = "Mod Queue - Car Crushers";