import {
  Box,
  Card,
  CardBody,
  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: { [k: string]: any }[] = useLoaderData<typeof loader>();
  const eventCards: ReactNode[] = [];

  for (const event of data) {
    eventCards.push(
      <Card w="100%">
        <CardBody>
          <Stack divider={<StackDivider />} spacing="4">
            <Box>
              <Heading size="sm">Date</Heading>
              <Text fontSize="sm" pt="2">
                {event.year}-{event.month}-{event.day}
              </Text>
            </Box>
            <Box>
              <Heading size="sm">Event Type</Heading>
              <Text fontSize="sm" pt="2">
                {event.type.toUpperCase()}
              </Text>
            </Box>
            <Box>
              <Heading size="sm">Host</Heading>
              <Text fontSize="sm" pt="2">
                {event.created_by}
              </Text>
            </Box>
          </Stack>
        </CardBody>
      </Card>,
    );
  }

  return (
    <Container maxW="container.lg">
      <VStack spacing="8">{eventCards}</VStack>
      <Link color="#646cff" href="/book-event" mt="16px">
        Book an Event
      </Link>
      <br />
      <Link color="#646cff" href="/et-members" mt="8px">
        Events Team Member Management
      </Link>
    </Container>
  );
}