Vue.component('tt-date-picker', {
    props: {
        label: String,
        disabled: Boolean,
        placeholder: String,
        required: Boolean,
        row: Boolean,
        value: [Object, Number, String],
        hint: String,
        additionalProps: Object,
        sm: { type: Boolean, default: false },
        dateRange: { type: Boolean, default: true },
        timePicker: { type: Boolean, default: true },
    },
    template: `
      <div class="form-group" :class="{'row': row}">
        <slot name="prepend"></slot>
        <label v-if="label" :for="label" :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}">{{ label }}</label>
        <input type="text" ref="input" style="cursor: pointer;"
               :id="label" :name="label" :placeholder="placeholder" :required="required" :disabled="disabled"
               class="form-control" :class="{'form-control-sm': sm, 'col-sm-8': row}" v-bind="additionalProps">
        <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
      </div>
    `,
    data() {
        return {
            isInitialized: false,
            moment: window.moment,
            locale: {
                format: 'DD.MM.YYYY HH:mm',
                separator: ' - ',
                applyLabel: 'Übernehmen',
                cancelLabel: 'Abbrechen',
                fromLabel: 'Von',
                toLabel: 'Bis',
                customRangeLabel: 'Benutzerdef.',
                weekLabel: 'W',
                daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                firstDay: 1
            },
        }
    },
    async mounted() {
        const loadScript = (src, check) => new Promise((resolve, reject) => {
            if (check()) return resolve();
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });

        await loadScript('/js/jquery.min.js', () => typeof jQuery !== 'undefined');
        await loadScript('/plugins/daterangepicker/daterangepicker.js', () => typeof $?.fn?.daterangepicker !== 'undefined');

        if (!this.timePicker) {
            this.locale.format = 'DD.MM.YYYY';
        }

        const pickerOptions = {
            autoUpdateInput: false,
            singleDatePicker: !this.dateRange,
            timePicker: this.timePicker,
            timePicker24Hour: true,
            locale: this.locale,
            startDate: this.dateRange ? (this.value?.from ? this.moment.unix(this.value.from) : this.moment()) : (this.value ? this.moment.unix(this.value) : this.moment()),
            endDate: this.dateRange ? (this.value?.to ? this.moment.unix(this.value.to) : this.moment()) : (this.value ? this.moment.unix(this.value) : this.moment()),
        };

        const $input = $(this.$refs.input);
        $input.daterangepicker(pickerOptions);
        this.updateInputValue(this.value);

        $input.on('apply.daterangepicker', (ev, picker) => {
            const val = this.dateRange
                ? { from: picker.startDate.unix(), to: picker.endDate.unix() }
                : picker.startDate.unix();
            this.$emit('input', val);
            this.updateInputValue(val);
        });

        $input.on('cancel.daterangepicker', () => {
            this.$emit('input', undefined);
            this.updateInputValue(undefined);
        });

        this.isInitialized = true;
    },
    methods: {
        updateInputValue(val) {
            const $input = $(this.$refs.input);
            if (this.dateRange) {
                if (val?.from && val?.to) {
                    const from = this.moment.unix(val.from).format(this.locale.format);
                    const to = this.moment.unix(val.to).format(this.locale.format);
                    $input.val(from + this.locale.separator + to);
                } else $input.val('');
            } else {
                if (val) $input.val(this.moment.unix(val).format(this.locale.format));
                else $input.val('');
            }
        },
        setStartDate: (date) => $(this.$refs.input).data('daterangepicker').setStartDate(date)
    },
    watch: {
        value(newVal) {
            if (!this.isInitialized) return;

            this.updateInputValue(newVal);

            const datePicker = $(this.$refs.input).data('daterangepicker');
            if (this.dateRange) {
                datePicker.setStartDate(newVal?.from ? this.moment.unix(newVal.from) : this.moment());
                datePicker.setEndDate(newVal?.to ? this.moment.unix(newVal.to) : this.moment());
            } else {
                const date = newVal ? this.moment.unix(newVal) : this.moment();
                datePicker.setStartDate(date);
                datePicker.setEndDate(date);
            }
        }
    },
    beforeDestroy() {
        const picker = $(this.$refs.input).data('daterangepicker');
        if (picker) picker.remove();
    },
});