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: today,
    // 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++) {

            const datePickerElement = datePickerElements[i];
            let selectedDate = datePickerElement.value;
            let minDate = datePickerElement.getAttribute('data-min-date');

            flatpickr(datePickerElements[i], {
                minDate: minDate,
                defaultDate: selectedDate,
            });
        }
    },

};

DatePickerHandler.init();