<script lang="ts" setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ComputedRef, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

const props = defineProps({
  room: {
    type: String,
    required: true,
  },
});

type CalenderEvent = {
  id: number;
  start: string;
  end: string;
};

const currentDateFrom: Ref<string> = ref("");
const currentDateTo: Ref<string> = ref("");
const occupations: Ref<CalenderEvent[]> = ref([]);

const selectedRoom = computed(() => props.room);

watch(selectedRoom, () => {
  getOccupation();
});

const fullCalendar = ref<InstanceType<typeof FullCalendar>>();

async function getOccupation() {
  if (selectedRoom.value === "") {
    return;
  }
  const events = await fetchEventsByRoomAndDuration(
    selectedRoom.value,
    currentDateFrom.value,
    currentDateTo.value,
  );
  occupations.value = events.map((event, index) => {
    return {
      id: index,
      start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
      end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
    };
  });

  const calendar = fullCalendar.value?.getApi();
  calendar?.refetchEvents();
}

import allLocales from "@fullcalendar/core/locales-all";

const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
  return {
    locales: allLocales,
    locale: t("languageCode"),
    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
    initialView: "week",
    dayHeaderFormat: { weekday: "short", omitCommas: true },
    slotDuration: "00:15:00",
    eventTimeFormat: {
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    },
    views: {
      week: {
        description: "Wochenansicht",
        type: "timeGrid",
        slotLabelFormat: {
          hour: "numeric",
          minute: "2-digit",
          omitZeroMinute: false,
          meridiem: false,
          hour12: false,
        },
        dateAlignment: "week",
        titleFormat: { month: "short", day: "numeric" },
        slotMinTime: "06:00:00",
        slotMaxTime: "22:00:00",
        duration: { days: 7 },
        firstDay: 1,
        allDaySlot: false,
        hiddenDays: [0],
      },
      Day: {
        type: "timeGrid",
        slotLabelFormat: {
          hour: "numeric",
          minute: "2-digit",
          omitZeroMinute: false,
          meridiem: false,
          hour12: false,
        },
        titleFormat: { month: "short", day: "numeric" },
        slotMinTime: "06:00:00",
        slotMaxTime: "22:00:00",
        duration: { days: 1 },
        allDaySlot: false,
        hiddenDays: [0],
      },
    },
    headerToolbar: {
      end: "prev,next today",
      center: "title",
      start: "week,Day",
    },

    datesSet: function (dateInfo: any) {
      const view = dateInfo.view;
      const offset = new Date().getTimezoneOffset();
      const startDate = new Date(
        view.activeStart.getTime() - offset * 60 * 1000,
      );
      const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
      currentDateFrom.value = startDate.toISOString().split("T")[0];
      currentDateTo.value = endDate.toISOString().split("T")[0];
      getOccupation();
    },
    events: function (_info: any, successCallback: any, failureCallback: any) {
      if (occupations.value.length === 0) {
        failureCallback(new Error("no events"));
      } else {
        successCallback(
          occupations.value.map((event) => {
            return {
              id: event.id.toString(),
              start: event.start,
              end: event.end,
            } as EventInput;
          }),
        );
      }
    },
  };
});
</script>
<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template>
