Vue.component('tt-select', {
    props: {
        options: {type: Array, required: true},
        label: {type: String, required: false},
        required: {type: Boolean, default: false},
        value: {type: [String, Number], required: false},
        suffix: {type: String, required: false},
        sm: {type: Boolean, default: false},
        row: {type: Boolean, default: false},
    },
    data() {
        return {
            selectedOption: undefined,
        };
    },
    mounted() {
        this.selectedOption = this.value;
    },
    watch: {
        value(newValue) {
            this.selectedOption = newValue;
        },
    },
    template: `
                <div class="form-group" :class="{'row': row}">
        <label v-if="label"
               :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"

               :for="label">{{ label }}</label>
        <select class="form-control" :class="{'form-control-sm': sm, 'col-sm-8': row}"
                :required="required" v-model="selectedOption"
                @change="$emit('input', $event.target.value ? $event.target.value : undefined)">
          <template v-for="option of options">
            <option v-if="['string','number'].includes(typeof option)" :value="option" :disabled="option.disabled === true">{{ option }}
              <template v-if="suffix"> {{ suffix }}</template>
            </option>
            <option v-else :value="option.value" :disabled="option.disabled === true">{{ option.text }}</option>
          </template>
        </select>
      </div>
    `
});