import { Controller } from '@hotwired/stimulus'
import flatpickr from 'flatpickr';
import { German } from 'flatpickr/dist/l10n/de';

/* stimulusFetch: 'lazy' */
export default class extends Controller {

    static targets = [ 'field' ]
    static values = {
        minDate: String,
        maxDate: String,
        disableWeekends: Boolean,
    }

    initialize() {
        flatpickr.localize(German)
    }

    connect() {
        const minDate = this.minDateValue
        const maxDate = this.maxDateValue
        const options = {
            dateFormat: 'Y-m-d',
            altFormat: 'd.m.Y',
            minDate,
            maxDate,
            altInput: true,
            allowInput: true,
            onClose(dates, currentdatestring, instance) {
                instance.setDate(instance.altInput.value, true, instance.config.altFormat)
                this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
            },
            onChange(dates, currentdatestring, instance) {
                this.element.dispatchEvent(new CustomEvent('datepicker:picked', {
                    detail: {
                        date: instance.altInput.value
                    }
                }))
            },
        }

        if (true === this.disableWeekendsValue) {
            options['disable'] =  [
                function(date) {
                    return (date.getDay() === 0 || date.getDay() === 6);
                }
            ]
        }

        this.picker = flatpickr(this.fieldTarget, options)
    }

    disconnect() {
        this.picker.destroy()
    }
}