import { Controller } from '@hotwired/stimulus'
import { Calendar } from 'vanilla-calendar-pro'

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

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

    connect() {
        const options = {
            inputMode: true,
            locale: 'de-DE',
            selectedTheme: 'light',
            selectedDates: this.hiddenFieldTarget.value ? [this.hiddenFieldTarget.value] : [],
            onClickDate: (self) => {
                const iso = self.context.selectedDates[0] ?? null
                this.hiddenFieldTarget.value = iso ?? ''
                if (iso) {
                    const [year, month, day] = iso.split('-')
                    this.fieldTarget.value = `${day}.${month}.${year}`
                } else {
                    this.fieldTarget.value = ''
                }
                this.element.dispatchEvent(new CustomEvent('datepicker:picked', {
                    detail: { date: this.fieldTarget.value }
                }))
            },
            onHide: () => {
                this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
            },
        }

        if (this.minDateValue) options.dateMin = this.minDateValue
        if (this.maxDateValue) options.dateMax = this.maxDateValue
        if (this.disableWeekendsValue) options.disableWeekdays = [0, 6]
        if (this.disabledDatesValue.length) options.disableDates = this.disabledDatesValue

        this.picker = new Calendar(this.fieldTarget, options)
        this.picker.init()

        this.handleManualInput = () => {
            const value = this.fieldTarget.value.trim()
            if (!value) {
                this.hiddenFieldTarget.value = ''
                this.picker.set({ selectedDates: [] }, { dates: true })
            } else {
                const match = value.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/)
                if (match) {
                    const [, day, month, year] = match
                    const iso = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
                    this.hiddenFieldTarget.value = iso
                    this.picker.set({ selectedDates: [iso] }, { dates: true })
                }
            }
            this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
        }
        this.fieldTarget.addEventListener('change', this.handleManualInput)
    }

    disconnect() {
        this.fieldTarget.removeEventListener('change', this.handleManualInput)
        this.picker.destroy()
    }
}