import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
import nlLocal from '@fullcalendar/core/locales/nl';

class DayCalendarHandler {

    constructor() {

        this.dayCalendars = [];
        this.updateSizes = this.updateSizes.bind(this);
        this.makeCalendars = this.makeCalendars.bind(this);

        this.dayCalendarElements = document.querySelectorAll('.js-day-calendar');
        if(this.dayCalendarElements.length <= 0) return;

        this.makeCalendars();

    }

    async makeCalendars() {

        const self = this;

        this.dayCalendarElements.forEach(function(dayCalendarElement, index) {

            dayCalendarElement.id = 'day-calendar-' + index;

            self.dayCalendars.push(new Calendar(dayCalendarElement, {
                plugins: [timeGridPlugin],
                header: false,
                locale: nlLocal,
                defaultDate: dayCalendarElement.dataset.date,
                defaultView: 'timeGridDay',
                // defaultView: 'timeGridWeek',

                allDaySlot: false,
                slotEventOverlap: false,
                minTime: "06:00:00",
                maxTime: "24:00:00",
            }));
        });

        this.renderCalendars();
        this.updateSizes();
    }

    renderCalendars() {
        this.dayCalendars.forEach(function (dayCalendar) {
            dayCalendar.render();
        });
    }

    /**
     * Update the sizes of the day calendars.
     * Is recurring till all the day calendars have atleast 80px height
     */
    updateSizes() {
        console.log('Update size runned.');

        let anyCalendarHaveNoHeights = false;

        this.dayCalendars.forEach(function (dayCalendar) {

            dayCalendar.updateSize();

            // Determine if we need to run the updateSize functions
            const timeGridContainer = dayCalendar.el.querySelector('.fc-time-grid-container');
            if(timeGridContainer.clientHeight < 80) anyCalendarHaveNoHeights = true;
        });

        // Run update again when still a size hasn't been defined
        if(anyCalendarHaveNoHeights) {
            setTimeout(this.updateSizes, 200);
        }
        else {
            this.addEvents()
        }
    }

    addEvents() {

        this.dayCalendars.forEach(function (dayCalendar) {

            const addedEventIds = [];

            const reservationEvents = dayCalendar.el.querySelectorAll('.js-reservation-event');
            const reservedEvents = dayCalendar.el.querySelectorAll('.js-reserved-event');

            reservationEvents.forEach(function (reservationEvent) {

                addedEventIds.push(reservationEvent.dataset.id);

                dayCalendar.addEvent({
                    title: reservationEvent.dataset.name,
                    start: reservationEvent.dataset.start,
                    end: reservationEvent.dataset.end,
                    className: 'is-primary'
                });
            });

            reservedEvents.forEach(function (reservedEvent) {

                if(addedEventIds.includes(reservedEvent.dataset.id)) return;
                addedEventIds.push(reservedEvent.dataset.id);

                dayCalendar.addEvent({
                    title: reservedEvent.dataset.name,
                    start: reservedEvent.dataset.start,
                    end: reservedEvent.dataset.end,
                });
            });

        });

    }
}
export { DayCalendarHandler };