import { Center, Flex, ScrollArea, SegmentedControl } from "@mantine/core";
import { useEffect, useRef, useState } from "react";
import { DayPilotCalendar, DayPilot } from "@daypilot/daypilot-lite-react";
import { useRosterStore } from "@/util/providers/roster-store-provider";
import CourseCard from "@/components/CourseCard";

type ViewState = "courses" | "per-student";

export default function SchedulesPage() {
  const [view, setView] = useState<ViewState>("courses");
  // const controlRef = useRef<DayPilot.Calendar>(null);
  const [calendar, setCalendar] = useState<DayPilot.Calendar>();

  const { courses } = useRosterStore(state => state);

  useEffect(() => {
    if (!calendar || calendar?.disposed()) return;

    const mappedCourses = courses.map(course => ({
      id: course.id,
      text: course.name,
      start: course.timeStart.toISOString(),
      end: course.timeEnd.toISOString(),
      resource: "monday"
    }));

    const events = [
      {
        id: 1,
        text: "Event 1",
        start: "2024-05-02T00:00:00",
        end: "2024-05-05T00:00:00",
        resource: "A",
        owner: "AB"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2024-05-03T00:00:00",
        end: "2024-05-05T00:00:00",
        resource: "C",
        barColor: "#5bbe2d",
        barBackColor: "#93c47d",
        owner: "BK"
      },
      {
        id: 3,
        text: "Event 3",
        start: "2024-05-02T00:00:00",
        end: "2024-05-04T00:00:00",
        resource: "D",
        barColor: "#f1c232",
        barBackColor: "#f1c232",
        owner: "FH"
      },
      {
        id: 4,
        text: "Event 3",
        start: "2024-05-02T00:00:00",
        end: "2024-05-04T00:00:00",
        resource: "E",
        barColor: "#cc4125",
        barBackColor: "#ea9999",
        owner: "IG"
      }
    ];

    console.log(events);

    const columns = [
      { name: "Resource A", id: "A" },
      { name: "Resource B", id: "B" },
      { name: "Resource C", id: "C" },
      { name: "Resource D", id: "D" },
      { name: "Resource E", id: "E" },
      { name: "Resource F", id: "F" },
      { name: "Resource G", id: "G" }
    ];

    calendar.update({ events, columns });

  }, [calendar, courses]);

  return (
    <Flex gap={"sm"} direction={"column"}>
      <Center>
        <SegmentedControl
          data={[
            { label: "Courses", value: "courses" },
            { label: "Per Student", value: "per-student" }
          ]}
          value={view}
          onChange={val => setView(val as ViewState)}
        />
      </Center>

      <Flex gap="sm">
        <div style={{ flex: 3 }}>
          <DayPilotCalendar
            viewType="Resources"
            controlRef={setCalendar}
            columns={[
              { name: "Resource A", id: "A" },
              { name: "Resource B", id: "B" },
              { name: "Resource C", id: "C" },
              { name: "Resource D", id: "D" },
              { name: "Resource E", id: "E" },
              { name: "Resource F", id: "F" },
              { name: "Resource G", id: "G" }
            ]}
            heightSpec="BusinessHoursNoScroll"

            businessBeginsHour={9}
            businessEndsHour={17}
          />
        </div>

        <div style={{ flex: 1 }}>
          <ScrollArea h={512}>
            {courses.map(course => (
              <CourseCard
                key={course.id}
                course={course}
              />
            ))}
          </ScrollArea>
        </div>
      </Flex>
    </Flex >
  )
}