Vue.component('tt-date-picker', {
    template: `
      <input type="text" class="form-control form-control-sm" ref="input"
             style="cursor: pointer;background-color: #ffffff">
    `, props: ['value'],
    data() {
        return {
            inputValue: '',
            isInitialized: false,
            moment: window.moment,
            locale: {
                "format": "DD.MM.YYYY HH:mm",
                "separator": " - ",
                "applyLabel": "Übernehmen",
                "cancelLabel": "Löschen",
                "fromLabel": "Von",
                "toLabel": "Bis",
                "customRangeLabel": "Benutzerdefiniert",
                "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
            },
        }
    },
    mounted() {
        this.isInitialized = true;
        $(this.$refs.input).daterangepicker({
            autoUpdateInput: true,
            startDate: this.value?.from ? this.moment.unix(this.value.from) : undefined,
            endDate: this.value?.to ? this.moment.unix(this.value.to) : undefined,
            timePicker: true,
            timePicker24Hour: true,
            locale: this.locale,
        });

        const _this = this;
        $(this.$refs.input).on('apply.daterangepicker', function (ev, picker) {
            _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));
        });

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

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

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

        // if value from or to is undefined then clear the input field
        if (!this.value || this.value.from === null || this.value.to === null) {
            $(_this.$refs.input).val('');
        }

    },
    watch: {
        value: function (newVal) {
            if (!this.isInitialized) return;

            const datePicker = $(this.$refs.input).data('daterangepicker');
            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));
            }
        }
    },
    beforeDestroy() {
        $(this.$refs.input).off('apply.daterangepicker');
        $('.daterangepicker').remove();
    },
})