Vue.component('tt-number-range', {
    props: {
        returnText: {type: Boolean, default: false},
        value: [String, Object],
    },
    data() {
        return {
            inputValueFrom: this.value?.from || '',
            inputValueTo: this.value?.to || '',
        };
    }, watch: {
        value(val) {
            if (this.returnText !== true) {
                this.inputValueFrom = val.from;
                this.inputValueTo = val.to;
            } else {
                if (val.includes('<')) {
                    this.inputValueFrom = '';
                    this.inputValueTo = val.replace('<', '');
                } else if (val.includes('>')) {
                    this.inputValueFrom = val.replace('>', '');
                    this.inputValueTo = '';
                } else {
                    this.inputValueFrom = val.split('-')[0];
                    this.inputValueTo = val.split('-')[1];
                }
            }

        }
    }, methods: {
        updateValue() {
            if (this.returnText !== true) {
                this.$emit('input', {from: this.inputValueFrom || undefined, to: this.inputValueTo || undefined});
            } else if (this.returnText === true) {
                if (!this.inputValueFrom  && !this.inputValueTo) {
                    this.$emit('input', '');
                } else if (!this.inputValueFrom) {
                    this.$emit('input', '<' + this.inputValueTo);
                } else if (!this.inputValueTo) {
                    this.$emit('input', '>' + this.inputValueFrom);
                } else {
                    this.$emit('input', this.inputValueFrom + '-' + this.inputValueTo);
                }
            }
        }
    }, template: `
    <div style="display:grid;grid-template-columns: 75px 25px 75px;grid-gap: 4px;justify-content: center">
      <slot name="prepend"></slot>
      <input type="number"
             class="form-control form-control-sm"
             v-model.number="inputValueFrom"
             @input="updateValue"
      >
      <div style="align-self: center;padding: 0 8px"><i class="fa-solid fa-sort" style="transform: rotate(90deg);"></i></div>
      <input type="number"
             class="form-control form-control-sm"
             v-model.number="inputValueTo"
             @input="updateValue"
      >
    </div>
    `
});