import {
  Box,
  Container,
  Flex,
  Select,
  useBreakpointValue,
  useToast,
  VStack,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";

export function Page(pageProps: { [p: string]: any }) {
  const isDesktop = useBreakpointValue({ base: false, lg: true });
  const entryTypes = [];

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

  async function updateQueue(queue_type: string, include_closed: boolean = false): Promise<void> {
    const queueReq = await fetch(`/api/mod-queue/list?type=${queue_type}&includeClosed=${include_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;
    }
  }

  return (
    <Container maxW="container.xl">
      <Flex>
        <VStack>

        </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";