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 },
    },
    template: `
    <div class="form-group" :class="{'row': row}">
      <slot name="prepend"></slot>
      <label
        :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
        v-if="label"
        :for="label">{{ label }}</label>
      <input type="text"
        :id="label"
        :name="label"
        class="form-control"
        :class="{'form-control-sm': sm, 'col-sm-8': row}"
        :placeholder="placeholder"
        :required="required"
        :disabled="disabled"
        v-bind="additionalProps"
        ref="input"
        style="cursor: pointer;"
      >
      <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
    </div>
  `,
    data() {
        return {
            inputValue: '',
            isInitialized: false,
            moment: window.moment,
            locale: {
                // ... (keep your existing locale object)
            },
        }
    },
    mounted() {
        this.isInitialized = true;
        const datePickerOptions = {
            autoUpdateInput: true,
            singleDatePicker: !this.dateRange,
            timePicker: true,
            timePicker24Hour: true,
            locale: this.locale,
        };

        if (this.dateRange) {
            datePickerOptions.startDate = this.value?.from ? this.moment.unix(this.value.from) : undefined;
            datePickerOptions.endDate = this.value?.to ? this.moment.unix(this.value.to) : undefined;
        } else {
            datePickerOptions.startDate = this.value ? this.moment.unix(this.value) : undefined;
        }

        $(this.$refs.input).daterangepicker(datePickerOptions);

        const _this = this;
        $(this.$refs.input).on('apply.daterangepicker', function (ev, picker) {
            if (_this.dateRange) {
                _this.$emit('input', {
                    from: picker.startDate.unix(),
                    to: picker.endDate.unix()
                });
                $(_this.$refs.input).val(picker.startDate.format(_this.locale.format) + _this.locale.separator + picker.endDate.format(_this.locale.format));
            } else {
                _this.$emit('input', picker.startDate.unix());
                $(_this.$refs.input).val(picker.startDate.format(_this.locale.format));
            }
        });

        function checkIfAppliedElseClear() {
            if (_this.dateRange) {
                if (_this.value && _this.value.from && _this.value.to) return;
            } else {
                if (_this.value) return;
            }
            $(_this.$refs.input).val('');
        }

        function clearIfCancelled() {
            _this.$emit('input', _this.dateRange ? {from: null, to: null} : null);
            $(_this.$refs.input).val('');
        }

        $(this.$refs.input).on('cancel.daterangepicker', clearIfCancelled);
        $(this.$refs.input).on('hide.daterangepicker', checkIfAppliedElseClear.bind(this));

        // Clear input field if value is not set
        if (_this.dateRange) {
            if (!this.value || this.value.from === null || this.value.to === null) {
                $(_this.$refs.input).val('');
            }
        } else {
            if (!this.value) {
                $(_this.$refs.input).val('');
            }
        }

        // Add click event listener to the document
        document.addEventListener('click', this.handleOutsideClick);
    },
    methods: {
        handleOutsideClick(event) {
            const datepicker = document.querySelector('.daterangepicker');
            const input = this.$refs.input;

            if (datepicker && !datepicker.contains(event.target) && event.target !== input) {
                if (input.parentElement.tagName.toLowerCase() === 'div' && input.parentElement.classList.contains('form-group')) {
                    return;
                }
                $(this.$refs.input).data('daterangepicker').hide();
            }
        },
        setStartDate(date) {
            $(this.$refs.input).data('daterangepicker').setStartDate(date);
        }
    },
    watch: {
        value: function (newVal) {
            if (!this.isInitialized) return;

            const datePicker = $(this.$refs.input).data('daterangepicker');
            if (this.dateRange) {
                if (!newVal || newVal.from === null || newVal.to === null) {
                    $(this.$refs.input).val('');
                } else {
                    datePicker.setStartDate(this.moment.unix(newVal.from));
                    datePicker.setEndDate(this.moment.unix(newVal.to));
                }
            } else {
                if (!newVal) {
                    $(this.$refs.input).val('');
                } else {
                    datePicker.setStartDate(this.moment.unix(newVal));
                    datePicker.setEndDate(this.moment.unix(newVal));
                }
            }
        }
    },
    beforeDestroy() {
        $(this.$refs.input).off('apply.daterangepicker');
        document.removeEventListener('click', this.handleOutsideClick);
    },
})