import {
  Box,
  Card,
  CardBody,
  CardHeader,
  Container,
  Heading,
  Link,
  Stack,
  StackDivider,
  Text,
  VStack,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";
import { type ReactNode } from "react";

export async function loader({ context }: { context: RequestContext }) {
  const now = new Date();
  const monthEventList = await context.env.D1.prepare(
    "SELECT * FROM events WHERE month = ? AND year = ?;",
  )
    .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
    .all();

  if (monthEventList.error)
    throw new Response(null, {
      status: 500,
    });

  return monthEventList.results;
}

export default function () {
  const data = useLoaderData<typeof loader>();
  const daysInThisMonth = new Date().setUTCDate(0);
  const dayCards: ReactNode[] = [];

  for (let i = 0; i < daysInThisMonth; i++) {
    const dayData: { [k: string]: any }[] = data.filter(
      (row) => row.day === i + 1,
    );

    if (!dayData.length) continue;

    const fotd = dayData.find((d) => d.type === "fotd");
    const gamenight = dayData.find((d) => d.type === "gamenight");
    const qotd = dayData.find((d) => d.type === "qotd");

    const dayCard = (
      <Card width="100%">
        <CardHeader>
          <Heading size="md">
            {new Date(
              dayData[0].year,
              dayData[0].month,
              dayData[0].day,
            ).toDateString()}
          </Heading>
        </CardHeader>
        <CardBody>
          <Stack divider={<StackDivider />} spacing={4}>
            <Box>
              <Heading size="xs">FACT OF THE DAY</Heading>
              <Text pt="2">{fotd ? "" : "Not"} Booked</Text>
            </Box>
            <Box>
              <Heading size="xs">GAMENIGHT</Heading>
              <Text pt="2">{gamenight ? "" : "Not"} Booked</Text>
            </Box>
            <Box>
              <Heading size="xs">QUESTION OF THE DAY</Heading>
              <Text pt="2">{qotd ? "" : "Not"} Booked</Text>
            </Box>
          </Stack>
        </CardBody>
      </Card>
    );

    dayCards.push(dayCard);
  }

  return (
    <Container maxW="container.lg">
      <VStack>{dayCards}</VStack>
    </Container>
  );
}