import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
import { Calendar, dayjsLocalizer } from "react-big-calendar";
import dayjs from "dayjs";
import { Container } from "@chakra-ui/react";

export async function loader({ context }: { context: RequestContext }) {
  const now = new Date();
  const eventsData = await context.env.D1.prepare("SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day;")
    .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
    .all();

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

  const eventList = eventsData.results.map(e => {
    return {
      id: e.id,
      title: (e.type as string).toUpperCase(),
      allDay: true,
      start: new Date(e.year, e.month, e.day),
      end: new Date(e.year, e.month, e.day)
    }
  })
}

export default function () {
  return (
    <Calendar localizer={dayjsLocalizer(dayjs)} style={{ height: 500 }} />
  )
}