@props([
    'options' => [],
    'minDate' => null,
    'maxDate' => null,
    'minModel' => null,
    'maxModel' => null,
    'placeholder' => null,
    'label' => null,
])

@php
    $isTimeOnly = ($options['noCalendar'] ?? false) === true;
    $placeholderText = $placeholder ?? $label ?? __($isTimeOnly ? 'Select time' : 'Select date');
    $ariaLabel = $label ?? $placeholderText;
    $minValueExpression = $minModel
        ? '$wire.entangle(\''.str_replace('\\', '\\\\', str_replace('\'', '\\\'', $minModel)).'\').live'
        : json_encode($minDate);
    $maxValueExpression = $maxModel
        ? '$wire.entangle(\''.str_replace('\\', '\\\\', str_replace('\'', '\\\'', $maxModel)).'\').live'
        : json_encode($maxDate);
@endphp

<div wire:ignore
     x-data="datePickerField({
        value: @entangle($attributes->wire('model')),
        minValue: {!! $minValueExpression !!},
        maxValue: {!! $maxValueExpression !!},
        placeholder: @js($placeholderText),
        locale: @js(app()->getLocale()),
        options: @js($options),
    })"
     x-init="initPicker()"
     class="w-full"
>
    <input x-ref="input"
           type="text"
           {{ $attributes->whereDoesntStartWith('wire:model')->merge([
                'placeholder' => $placeholderText,
                'aria-label' => $ariaLabel,
                'title' => $ariaLabel,
                'autocomplete' => 'off',
                'class' => 'w-full border rounded px-3 py-2 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white',
           ]) }}
    />
</div>

@once
    <script>
        window.registerDatePickerField = function () {
            if (!window.Alpine || window.datePickerFieldRegistered) return;

            window.datePickerFieldRegistered = true;
            Alpine.data('datePickerField', (settings) => ({
                value: settings.value,
                minValue: settings.minValue,
                maxValue: settings.maxValue,
                placeholder: settings.placeholder,
                locale: settings.locale,
                options: settings.options || {},
                instance: null,
                initPicker() {
                    if (this.instance) return;
                    if (!window.flatpickr) {
                        setTimeout(() => this.initPicker(), 50);
                        return;
                    }

                    const config = {
                        dateFormat: 'Y-m-d',
                        defaultDate: this.value,
                        ...this.options,
                        onReady: (selectedDates, dateStr, instance) => {
                            instance.input.setAttribute('placeholder', this.placeholder);
                            instance.input.setAttribute('title', this.placeholder);
                        },
                        onChange: (selectedDates, dateStr) => {
                            this.value = dateStr;
                        },
                    };

                    if (config.noCalendar) {
                        config.minTime = this.minValue || null;
                        config.maxTime = this.maxValue || null;
                    } else {
                        config.minDate = this.minValue || null;
                        config.maxDate = this.maxValue || null;
                    }

                    if (this.locale !== 'en' && window.flatpickr.l10ns && window.flatpickr.l10ns[this.locale]) {
                        config.locale = this.locale;
                    }

                    this.instance = window.flatpickr(this.$refs.input, config);

                    this.$watch('value', (newValue) => {
                        if (!this.instance || newValue === this.instance.input.value) return;

                        if (newValue) {
                            this.instance.setDate(newValue, false);
                        } else {
                            this.instance.clear(false);
                        }
                    });

                    this.$watch('minValue', (newValue) => {
                        if (!this.instance) return;

                        this.instance.set(this.options.noCalendar ? 'minTime' : 'minDate', newValue || null);
                        if (this.value && newValue && this.value < newValue) {
                            this.instance.clear();
                            this.value = '';
                        }
                    });

                    this.$watch('maxValue', (newValue) => {
                        if (!this.instance) return;

                        this.instance.set(this.options.noCalendar ? 'maxTime' : 'maxDate', newValue || null);
                        if (this.value && newValue && this.value > newValue) {
                            this.instance.clear();
                            this.value = '';
                        }
                    });
                },
            }));
        };

        document.addEventListener('alpine:init', window.registerDatePickerField);
        window.registerDatePickerField();
    </script>
@endonce