//fullcalendar import
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';

//type import
import type { Event } from './types';

//push calendar into webflow
window.Webflow ||= [];
window.Webflow.push(() => {
  //get the calendar div
  const calendarElement = document.querySelector<HTMLDivElement>('[data-element="calendar"]');
  if (!calendarElement) return;

  //call getEvents function
  const events = getEvents();
  console.log(events);

  //initialize and set up the calendar
  const calendar = new Calendar(calendarElement, {
    //plugins we need
    plugins: [dayGridPlugin, listPlugin],

    //calendar settings
    initialView: 'dayGridMonth',
    fixedWeekCount: false,
    showNonCurrentDates: true,
    slotMinTime: '10:00:00',
    slotMaxTime: '19:00:00',
    headerToolbar: {
      left: 'title',
      right: 'dayGridMonth,listMonth,prev,next',
    },
    buttonText: {
      month: 'Month',
      list: 'List',
    },
    eventTimeFormat: {
      hour: '2-digit',
      minute: '2-digit',
      hour12: true,
      meridiem: 'short',
    },
    slotLabelFormat: {
      hour: '2-digit',
      minute: '2-digit',
      hour12: true,
      meridiem: 'short',
    },
    views: {
      dayGrid: {
        // options apply to dayGridMonth, dayGridWeek, and dayGridDay views
        displayEventEnd: true,
      },
    },

    //handle the responsive
    windowResize: function () {
      if (window.innerWidth < 1000) {
        calendar.changeView('listMonth');
      }
    },

    //call the events to show
    events,
  });

  //render the calendar
  calendar.render();
});

// function to get events from webflow
const getEvents = (): Event[] => {
  const scripts = document.querySelectorAll<HTMLScriptElement>('[data-element="event-data"]');

  const events = [...scripts].map((script) => {
    const event: Event = JSON.parse(script.textContent!);

    // get all the start collection dates in date format
    const startDate = new Date(event.startDate);

    //check if we have an end date + get them in date format
    let endDate;
    if (event.endDate === '' || event.endDate === undefined) {
      const newDate = new Date(event.startDate);
      /*newDate.setDate(newDate.getDate() + 1);*/
      endDate = newDate;
    } else {
      const newDate = new Date(event.endDate);
      //newDate.setDate(newDate.getDate() + 1);
      endDate = newDate;
    }

    //check if we have start hours
    if (event.allDay === true) {
      event.startHour = '10:00:00';
    } else if (event.allDay === false) {
      event.display = 'block';
      if (event.startHour === ':00') {
        event.startHour = '10:00:00';
      }
    }

    //check if we have end hours
    if (event.endHour === ':00') {
      event.endHour = '18:00:00';
    }

    //START DATE FORMATTING
    //day
    const startDay = startDate.getDate();
    let startDayOk;
    if (startDay < 10) {
      startDayOk = ('0' + startDay).slice(-2);
    } else {
      startDayOk = startDay;
    }

    // month
    const startMonth = startDate.getMonth() + 1;
    let startMonthOk;

    if (startMonth < 10) {
      startMonthOk = ('0' + startMonth).slice(-2);
    } else {
      startMonthOk = startMonth;
    }
    //year
    const startYear = startDate.getFullYear();

    //assign to start
    event.start = startYear + '-' + startMonthOk + '-' + startDayOk + 'T' + event.startHour;

    // END DATE FORMATTING
    //day
    const endDay = endDate.getDate();
    let endDayOk;
    if (endDay < 10) {
      endDayOk = ('0' + endDay).slice(-2);
    } else {
      endDayOk = endDay;
    }

    // month
    const endMonth = endDate.getMonth() + 1;
    let endMonthOk;
    if (endMonth < 10) {
      endMonthOk = ('0' + endMonth).slice(-2);
    } else {
      endMonthOk = endMonth;
    }
    //year
    const endYear = endDate.getFullYear();

    //assign to end
    event.end = endYear + '-' + endMonthOk + '-' + endDayOk + 'T' + event.endHour;

    //event display setting
    //event.display = 'auto';

    //apostrophe display
    event.title = event.title.replace(/&#39;/g, "'");

    //background color
    if (event.category === 'Private party') {
      event.backgroundColor = '#f68b1f';
      event.borderColor = '#f68b1f';
      event.textColor = 'white';
    } else if (event.category === 'PD Day') {
      event.backgroundColor = '#eb9e30';
      event.borderColor = '#eb9e30';
      event.textColor = '#2a2828';
    } else if (event.category === 'Special Event') {
      event.backgroundColor = '#e52a24';
      event.borderColor = '#e52a24';
      event.textColor = 'white';
    } else {
      event.backgroundColor = '#ea652d';
      event.borderColor = '#ea652d';
      event.textColor = 'white';
    }

    return event;
  });

  return events;
};