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

class FullCalendarHandler {

    constructor() {

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

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

        this.makeCalendars();

    }

    async makeCalendars() {

        const self = this;

        this.fullCalendarElements.forEach(function(fullCalendarElement, index) {

            fullCalendarElement.id = 'full-calendar-' + index;

            const calendar = new Calendar(fullCalendarElement, {
                plugins: [timeGridPlugin],
                // header: false,

                header: {
                    left: 'title',
                    right: 'today prev,next timeGridWeek,timeGridDay'
                },

                locale: nlLocal,
                defaultDate: fullCalendarElement.dataset.date,
                defaultView: 'timeGridWeek',

                allDaySlot: false,
                slotEventOverlap: false,
                minTime: "06:00:00",
                maxTime: "24:00:00",
                validRange: {
                    start: fullCalendarElement.dataset.start
                },
                // eventClick: function(info) {
                //     debugger;
                // }
            });

            self.fullCalendars.push(calendar);

        });

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

    renderCalendars() {
        this.fullCalendars.forEach(function (fullCalendar) {
            fullCalendar.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.fullCalendars.forEach(function (fullCalendar) {

            fullCalendar.updateSize();

            // Determine if we need to run the updateSize functions
            const timeGridContainer = fullCalendar.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.fullCalendars.forEach(function (fullCalendar) {

            const reservationEvents = fullCalendar.el.querySelectorAll('.js-reservation-event');

            reservationEvents.forEach(function (reservationEvent) {

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

            const blockOuts = fullCalendar.el.querySelectorAll('.js-block-out');

            blockOuts.forEach(function (blockOut) {

                fullCalendar.addEvent({
                    title: blockOut.dataset.name,
                    start: blockOut.dataset.start,
                    end: blockOut.dataset.end,
                    className: 'is-warning',
                    url: blockOut.dataset.url
                });
            });

        });

    }
}
export { FullCalendarHandler };