<template>

    <section class="datePickerWrapper">

        <input type="text"
            :id="id"
            :name="name"
            class="datePicker"
            :class="inputClass"
            :placeholder="placeholder ? placeholder : ''"
        />
        <input
                style="display: none"
                type="text"
                class="datePickerVueAlt"
                :id="id_alt"
        />

    </section>

</template>

<script>

import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';

/**
 * Date picker component (vanilla, flatpickr-backed).
 *
 * Replaces the previous date picker that wrapped jquery-ui. Visible format
 * is DD/MM/YYYY; the component emits ISO (YYYY-MM-DD) via `input` so the
 * parent can bind to a model. The hidden `.datePickerVueAlt` element
 * mirrors the original `altField` behaviour for any consumer still reading
 * from the DOM.
 */
export default {

    name: 'datepicker',

    props: {
        inputClass: {
            type: String,
            default: '',
        },
        id: String,
        name: String,
        placeholder: String,
        value: String,
        disabledDates: {
            type: Array,
            default: () => [],
        },
        options: {
            type: Object,
        },
    },

    computed: {

        id_alt() {
            return this.id + '_alt';
        },

    },

    data() {
        return {
            picker: null,
        };
    },

    methods: {

        getDatepickerElement() {
            return this.$el.querySelector('.datePicker');
        },

        getAltElement() {
            return this.$el.querySelector('.datePickerVueAlt');
        },

        defaultOptions() {
            const vm = this;
            return {
                dateFormat: 'd/m/Y',
                allowInput: true,
                minDate: '1910-01-01',
                maxDate: '2030-12-31',
                disable: vm.disabledDates.length
                    ? [(date) => {
                        // Match the legacy `D/M/Y` format used by callers.
                        const formatted = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
                        return vm.disabledDates.includes(formatted);
                    }]
                    : [],
                onChange(_selectedDates, _dateStr, instance) {
                    if (!instance.selectedDates.length) {
                        vm.$emit('input', '');
                        vm.getAltElement().value = '';
                        return;
                    }
                    const iso = instance.formatDate(instance.selectedDates[0], 'Y-m-d');
                    vm.$emit('input', iso);
                    vm.getAltElement().value = iso;
                },
            };
        },

    },

    mounted() {
        const el = this.getDatepickerElement();
        const opts = Object.assign({}, this.defaultOptions(), this.options);
        this.picker = flatpickr(el, opts);

        if (this.value) {
            this.picker.setDate(this.value, false, 'Y-m-d');
            this.getAltElement().value = this.value;
        }
    },

    beforeDestroy() {
        if (this.picker) {
            this.picker.destroy();
            this.picker = null;
        }
    },

    watch: {
        value(newVal) {
            if (this.picker) {
                this.picker.setDate(newVal || '', false, 'Y-m-d');
                this.getAltElement().value = newVal || '';
            }
        },
    },

};

</script>
