<template>
    <el-input :placeholder="placeholder"
              v-model="value"
              :disabled="disabled"
              class="el-search__select"
              @input="$emit('search-query-changed', $event)"
              @keyup.enter.native="submit"
             v-data-element:search="{ dataElement: dataElement || placeholder }"
    >
        <el-select v-if="searchType"
                   v-test-id="'search-type-select'"
                   v-model="selectedOption"
                   :disabled="disabled"
                   slot="prepend"
                   @change="$emit('search-type-changed', $event)"
                   :class="selectSizeClass"
                   :placeholder="searchType.placeholder || 'Select'">
            <el-option v-for="option in searchType.options"
                       :label="option.label"
                       :value="option.value"
                       :key="option.value"
            ></el-option>
        </el-select>
        <el-button slot="append"
                   v-bind="iconProp"
                   :disabled="disabled"
                   class="el-search__button"
                   @click="submit">{{ buttonText }}</el-button>
    </el-input>
</template>
<script>
export default {
  name: 'ElSearch',
  props: {
    // the search input placeholder
    placeholder: {
      type: String,
      required: false,
      default: 'Search'
    },
    // use this if you want a predetermined search query
    query: {
      type: String,
      required: false
    },
    // this is if you want to prepend a dropdown with search types.
    // look at the examples -> /en-US/component/input#mixed-input
    searchType: {
      type: Object,
      validator: (value) => (value.options != null && value.options.constructor === Array)
    },
    // for backend requests disable clicking the search again until the data is loaded.
    disabled: {type: Boolean, default: false},
    buttonText: {
      type: String,
      required: false,
      default: 'Search'
    },
    excludeButtonIcon: {
      type: Boolean,
      required: false
    },
    dataElement: String
  },
  created() {
    if (this.searchType) {
      if (this.searchType.config == null) {
        this.searchType.config = {};
      }
      this.selectedOption = this.searchType.defaultOption;
    }
  },
  data() {
    return {
      value: this.query,
      selectedOption: null
    };
  },
  methods: {
    submit() {
      this.$emit('search-query-submitted', this.value);
    },
    clear(resetToQuery = false) {
      this.value = resetToQuery ? this.query : '';
    }
  },
  computed: {
    selectSizeClass() {
      // if you add any size here make sure to update the scss to include that size there also
      // packages/theme-chalk/src/search.scss
      const includesSize = ['sm', 'md', 'lg', 'xl'].includes(this.searchType.config.size);
      return `el-search__select--${includesSize ? this.searchType.config.size : 'sm'}`;
    },
    iconProp() {
      const prop = {};
      if (!this.excludeButtonIcon) prop.icon = ['far', 'search'];
      return prop;
    }
  }
};
</script>
