<template>
  <div class="itf-inline-edit">
    <itf-select
      ref="input"
      class="input flex-grow-1"
      role="button"
      multiple
      :placeholder="focused ? 'Search for an option...' : 'Empty'"
      :tabindex="1"
      :disabled="!editable"
      :options="options"
      :reduce="option => option.Name"
      :get-option-label="option => option.Name"
      @search:focus="$emit('focus')"
      @search:blur="$emit('blur')"
      :value="itemsValue"
      @input="onInput"
    >
      <template #option="{ option }">
        <div>{{ option.Name }}</div>
      </template>
    </itf-select>
  </div>
</template>
<style lang="scss">
.itf-inline-edit {
  margin: -5px;
  padding: 5px;
}
.itf-inline-edit .itf-select .form-control {
  border: 0 none;
  margin: 0;
  outline: 0;
  resize: none;
  min-height: auto;
  padding: 0.1rem 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  box-shadow: none !important;
  background: transparent !important;
}
</style>
<script>
import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
import itfTextField from '../../text-field/TextField.vue';
import itfSelect from '../../select/Select.vue';

export default @Component({
  name: 'itfCustomizeInlineMultiselect',
  components: {
    itfTextField,
    itfSelect
  }
})

class itfCustomizeInlineMultiselect extends Vue {
  @Model('input') value;
  @Prop(Boolean) focused;
  @Prop(Boolean) editable;
  @Prop() field;

  get itemsValue () {
    return (this.value || '').toString().split(';;;').filter(v => v.length);
  }

  get options() {
    const list = (this.field && this.field.Options) || [];
    const notExists = this.itemsValue.filter(v => !list.find(o => o.Name === v));

    return [...list, ...notExists.map(v => ({ Name: v }))];
  }

  onInput(val) {
    this.$emit('input', val.join(';;;'));
  }
}
</script>
