import flatpickr from "flatpickr";
import { Dutch } from "flatpickr/dist/l10n/nl";
flatpickr.localize(Dutch);

// const today = new Date().setHours(0,0,0,0);

flatpickr.defaultConfig = {
    dateFormat: "d-m-Y",
    // minDate: today, // Probably bug in flatpickr but doesn't work
    // defaultDate: new Date().setHours(0,0,0,0),
    // allowInput: true, // We disable by input, because it's buggy and not working if you change the format style...
    nextArrow: '<span class="lib-flatpickr__arrow  lib-flatpickr__arrow--next"></span>',
    prevArrow: '<span class="lib-flatpickr__arrow  lib-flatpickr__arrow--prev"></span>',
    disableMobile: "true" // needs to be disabled, otherwise it crashes on mobile

    // This allows to change the date by changing the input
    // onClose: function (selectedDates, dateStr, instance) {
    //     if(selectedDates.length === 1) {
    //         instance.setDate(dateStr);
    //         instance.onClose(selectedDates, dateStr, instance);
    //     }
    // },
    
    // We check in the on change method that it must be before the minDate
    // onChange: function (selectedDates, dateStr, instance) {
    //     debugger;
    // }
};

const DatePickerHandler = {

    datePickers: [],

    init: function () {

        const datePickerElements = document.getElementsByClassName('js-date-picker');

        for(let i = 0; i < datePickerElements.length; i++) {
            DatePickerHandler.makeFlatPickr(datePickerElements[i]);
        }
    },

    makeFlatPickr(datePickerElement) {

        let selectedDate = datePickerElement.value;
        let minDate = datePickerElement.getAttribute('data-min-date');

        let daysOfThWeekClosed = datePickerElement.getAttribute('data-days-of-the-week-closed');
        if(!isset(daysOfThWeekClosed)) daysOfThWeekClosed = [];
        else daysOfThWeekClosed = JSON.parse(daysOfThWeekClosed);

        flatpickr(datePickerElement, {
            minDate: minDate,
            defaultDate: selectedDate,
            "disable": [
                function(date) {
                    return daysOfThWeekClosed.indexOf(date.getDay()) !== -1;
                }
            ],
        });
    }
};

DatePickerHandler.init();

export { DatePickerHandler };