<template>
  <b-input-group class="overflow-auto">
    <template v-slot:prepend>
      <b-form-select
        v-if="dropdownOptions.length"
        v-model="dropdownValue"
        :options="dropdownOptions"
        class="border-0 rounded-0"
        :class="dropdownOptionsClass"
        :text-field="dropdownTextKey"
        :value-field="dropdownValueKey"
      />
    </template>

    <b-form-input
      type="search"
      autocomplete="off"
      v-model="inputValue"
      :debounce="debounce"
      @keyup.13="emitValue"
      list="searchDataList"
      class="border-y-0 border-right-0"
      :placeholder="$t('Eshop.Header.Search.Placeholder')"
    />
    <b-form-datalist v-if="dataListSupport" id="searchDataList" :options="getDataListOptions" />

    <b-input-group-append>
      <b-button v-show="inputValue" variant="white" class="text-black-50" @click="clearSearch">
        <icon name="clear-icon" />
      </b-button>
      <b-button variant="white" class="text-black-50 border-left" @click="emitValue">
        <icon name="search" />
      </b-button>
    </b-input-group-append>
  </b-input-group>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'SearchBar',
  props: {
    value: { type: Object, default: () => ({}) },
    dropdownTextKey: { type: String, default: 'text' },
    dropdownValueKey: { type: String, default: 'value' },
    dropdownOptions: { type: Array, default: () => [] },
    dropdownOptionsClass: { type: [Array, String], default: '' },
    dataListSupport: { type: Boolean, default: false },
    debounce: { type: [String, Number], default: 0 },
    dataListCallBack: { type: Function },
  },
  data() {
    return {
      dropdownValue: null,
      inputValue: '',
      dataListOptions: [],
    }
  },
  watch: {
    dropdownValue: {
      handler(val) {
        if (val !== this.value.dropdown) {
          this.emitValue()
        }
      },
    },
    value: {
      handler(val) {
        if (!_.isEqual(val, { dropdown: this.dropdownValue, input: this.inputValue })) {
          this.dropdownValue = val.dropdown || null
          this.inputValue = val.input || ''
        }
      },
      immediate: true,
    },
    async inputValue(val) {
      await this.loadAutofillData(val)
      this.autoEmitValueFromDataList()
    },
  },
  computed: {
    getDataListOptions() {
      return (this.dataListOptions || []).filter(data => data !== this.inputValue)
    },
  },
  methods: {
    emitValue() {
      let payload = { dropdown: this.dropdownValue, input: this.inputValue }
      this.$emit('update', payload)
    },
    clearSearch() {
      this.inputValue = ''
      this.emitValue()
    },
    async loadAutofillData(value) {
      if (typeof this.dataListCallBack === 'function' && value !== '') {
        await this.dataListCallBack(value).then(result => {
          this.dataListOptions = Object.assign([], result)
        })
      }
    },
    autoEmitValueFromDataList() {
      //TODO: Temporary solution
      if (this.dataListSupport && this.dataListOptions.length) {
        if (this.dataListOptions.includes(this.inputValue)) {
          this.emitValue()
        }
      }
    },
  },
}
</script>
