<template>
  <itf-select
    ref="input"
    class="itf-inline-edit flex-grow-1"
    role="button"
    :placeholder="focused ? 'Search for an option...' : 'Empty'"
    :tabindex="1"
    :disabled="!editable"
    :options="field && field.Options"
    :reduce="option => option.Name"
    :get-option-label="option => option.Name"
    @search:focus="$emit('focus')"
    @search:blur="$emit('blur')"
    :value="value"
    @input="$emit('input', $event)"
  >
    <template #option="{ option }">
      <div>{{ option.Name }}</div>
    </template>
  </itf-select>
</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: 'itfCustomizeInlineSelect',
  components: {
    itfTextField,
    itfSelect
  }
})

class itfCustomizeInlineSelect extends Vue {
  @Model('input') value;
  @Prop(Boolean) focused;
  @Prop(Boolean) editable;
  @Prop() field;
}
</script>
