import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { DateClickArg } from "@fullcalendar/interaction";
import React, { useState } from "react";
import { useEffect } from "react";
import { Box } from "@mui/material";
import { Task } from "models";
import { EventClickArg } from "@fullcalendar/core";

interface Props {
  dateClickMethod: (args: DateClickArg) => void;
  taskClickMethod: (arg: EventClickArg) => void;
  tasks: Task[];
  changeDateCallback: (date: Date) => void;
  initialView?: string;
  initialDate?: Date;
  centerToolbar?: string;
  calHeight?: string | number;
  hideToday?: boolean;
  hideTitle?: boolean;
  hideCal?: boolean;
  hideCalCallback?: () => void;
}

interface Event {
  id: string;
  title: string;
  start: Date;
  end: Date;
  backgroundColor: string;
}

export default function TaskCalendar(props: Props) {
  const {
    dateClickMethod,
    taskClickMethod,
    hideCalCallback,
    changeDateCallback,
    tasks,
    initialView,
    centerToolbar,
    calHeight,
    hideToday,
    hideTitle,
    hideCal
  } = props;
  const [events, setEvents] = useState<Event[]>([]);
  let ref = React.createRef<FullCalendar>();

  useEffect(() => {
    setEvents([]);
    let e: Event[] = [];
    tasks.forEach(task => {
      let event: Event = {
        id: task.key,
        title: task.title(),
        start: new Date(task.start() + "T" + task.startTime()),
        end: new Date(task.end() + "T" + task.endTime()),
        backgroundColor: task.settings.colour
      };
      e.push(event);
      setEvents([...e]);
    });
  }, [tasks]);

  useEffect(() => {
    if (ref.current && props.initialDate) {
      let api = ref.current.getApi();
      api.gotoDate(props.initialDate);
    }
  }, [props.initialDate, ref]);

  return (
    <Box>
      <FullCalendar
        ref={ref}
        contentHeight={hideCal ? 0 : calHeight}
        headerToolbar={{
          start: hideTitle ? "" : "title",
          center: centerToolbar,
          end: hideToday ? "back,forward" : "today back,forward"
        }}
        titleFormat={{ month: "short", year: "numeric" }}
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        //options for view dayGridWeek, dayGridMonth, timeGridWeek, timeGridMonth, timeGridDay
        initialView={initialView}
        dateClick={dateClickMethod}
        eventClick={taskClickMethod}
        events={events}
        allDaySlot={false}
        slotEventOverlap={false}
        nowIndicator
        dayHeaders={!hideCal}
        customButtons={{
          hide: {
            text: "Hide",
            click: () => {
              if (hideCalCallback) {
                hideCalCallback();
              }
            }
          },
          back: {
            text: "<",
            click: () => {
              if (ref.current) {
                let api = ref.current.getApi();
                api.prev();
                changeDateCallback(api.getDate());
              }
            }
          },
          forward: {
            text: ">",
            click: () => {
              if (ref.current) {
                let api = ref.current.getApi();
                api.next();
                changeDateCallback(api.getDate());
              }
            }
          }
        }}
      />
    </Box>
  );
}
