import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
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.popUp = document.querySelector('.js-popup');

        if(isset(this.popUp)) {
            document.addEventListener('mousemove', e => {
                this.popUp.style.left = e.pageX + 20 + 'px';
                this.popUp.style.top = e.pageY + 5 + 'px';
            });
        }

        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, dayGridPlugin],
                // header: false,

                header: {
                    left: 'title',
                    center: 'today prev,next',
                    right: 'dayGridMonth, 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;
                // }
                eventMouseEnter: function (interactionEvent) {
                    if(!interactionEvent.el.classList.contains('is-primary')) return
                    self.popUp.classList.remove('is-hidden')

                    const contents = self.popUp.querySelectorAll('.js-popup-content');
                    contents.forEach((c) => {
                        if(c.dataset.id == interactionEvent.event.id) c.classList.remove('is-hidden')
                        else c.classList.add('is-hidden')
                    })
                },
                eventMouseLeave: function(interactionEvent) {
                    if(!interactionEvent.el.classList.contains('is-primary')) return
                    self.popUp.classList.add('is-hidden')

                    const contents = self.popUp.querySelectorAll('.js-popup-content');
                    contents.forEach(c => c.classList.add('is-hidden'))
                }
            });

            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()
        }
    }

    handleDatesSet(dateInfo){
        debugger
        console.log("handleDatesSet handled", dateInfo);
    }

    addEvents() {

        this.fullCalendars.forEach(function (fullCalendar) {

            const reservationEvents = fullCalendar.el.querySelectorAll('.js-reservation-event');
            let colorType = 0;
            let reservationId = null;

            reservationEvents.forEach(function (reservationEvent) {

                if(reservationId !== reservationEvent.dataset.orderId) {
                    reservationId = reservationEvent.dataset.orderId
                    colorType++
                }
                if(colorType === 9) colorType = 1

                fullCalendar.addEvent({
                    id: reservationEvent.dataset.id,
                    title: reservationEvent.dataset.name,
                    start: reservationEvent.dataset.start,
                    end: reservationEvent.dataset.end,
                    className: 'is-primary is-primary--' + colorType,
                    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
                });
            });

            const calendarNotes = fullCalendar.el.querySelectorAll('.js-calendar-note');

            calendarNotes.forEach(function (note) {

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


            const locationAvailabilities = fullCalendar.el.querySelectorAll('.js-location-availability');

            locationAvailabilities.forEach(function (availability) {

                if(availability.dataset.allDay === '1') {
                    fullCalendar.addEvent({
                        title: 'Locatie gesloten',
                        daysOfWeek: [ availability.dataset.dayOfWeek ], // these recurrent events move separately
                        startTime: '00:00:00',
                        endTime: '23:59:59',
                        className: 'is-closed',
                        url: availability.dataset.url
                    });
                }
                else {
                    fullCalendar.addEvent({
                        daysOfWeek: [ availability.dataset.dayOfWeek ], // these recurrent events move separately
                        startTime: '00:00:00',
                        endTime: availability.dataset.start,
                        className: 'is-closed',
                        url: availability.dataset.url
                    });
                    fullCalendar.addEvent({
                        daysOfWeek: [ availability.dataset.dayOfWeek ], // these recurrent events move separately
                        startTime: availability.dataset.end,
                        endTime: '23:59:59',
                        className: 'is-closed',
                        url: availability.dataset.url
                    });
                }
            });

        });

    }
}
export { FullCalendarHandler };