"use client";

import { Calendar, momentLocalizer, View, Views } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";

const localizer = momentLocalizer(moment);

const BigCalendar = ({
  data,
}: {
  data: { id?: number; title: string; start: Date; end: Date }[];
}) => {
  const [view, setView] = useState<View>(Views.WORK_WEEK);
  const [date, setDate] = useState<Date>(new Date());

  const handleOnChangeView = (selectedView: View) => {
    setView(selectedView);
  };

  return (
    <Calendar
      localizer={localizer}
      events={data}
      components={{
        event: (props) => (
          <div className="flex flex-col h-full justify-between p-1">
            <span className="text-xs font-semibold truncate leading-tight" title={props.title}>{props.title}</span>
            {props.event.id && (
              <Link
                href={`/lesson?lessonId=${props.event.id}`}
                className="mt-1 flex items-center gap-1 w-max rounded text-xs bg-white bg-opacity-30 hover:bg-opacity-50 transition-all px-1 py-0.5"
              >
                <Image src="/student.png" alt="Board" width={10} height={10} />
                <span>Board</span>
              </Link>
            )}
          </div>
        )
      }}
      startAccessor="start"
      endAccessor="end"
      views={["month", "work_week", "day"]}
      view={view}
      date={date}
      style={{ height: "98%" }}
      onView={handleOnChangeView}
      onNavigate={setDate}
      min={new Date(2025, 1, 0, 8, 0, 0)}
      max={new Date(2025, 1, 0, 17, 0, 0)}
    />
  );
};

export default BigCalendar;
