<script>
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';

export default {
  components: {VueTypeaheadBootstrap},
  props: {
    value: {default: {}},
    options: {type: Array, default: []},
    search_by: {default: item => item.text},
    min_match_key: {type: Number, default: 2},
    max_match_rows: {type: Number, default: 10},
    is_disabled: {type: Boolean, default: false},
    placeholder: {type: String, default: ""},
    additional_class: {type: String, default: "is-invalid"},
  },
  data: () => ({
    helper: {
      local_value: "",
    }
  }),
  computed: {
    local_value: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    string_value : {
      get: function () {
        return this.search_by(this.value)
      }
    }
  },
  methods: {
    clearSuggestedData() {
      if (this.local_value) {
        this.local_value = {}
      }
    }
  }
}
</script>
<template>
  <vue-typeahead-bootstrap :data="options" v-model="string_value" :serializer="search_by"
                           :disabled="is_disabled" @keyup="clearSuggestedData"
                           @hit="local_value = $event" :placeholder="placeholder" :inputClass="additional_class"
                           :max-matches="max_match_rows" :min-matching-chars="min_match_key"/>
</template>