<template>
  <div class="search-global">
    <b-form-group
      :label="$t('global.form.search')"
      :label-for="`searchInput-${_uid}`"
      label-class="invisible"
      class="mb-2"
    >
      <div class="d-flex">
        <b-form-select
          v-if="showSearchBy"
          v-model="searchBy"
          class="mr-2 search-selector"
          :options="selectOptions"
          @change="onSelect"
        >
          <template #first>
            <b-form-select-option :value="null" disabled>{{
              $t('pagePostCodeLogs.table.searchBy')
            }}</b-form-select-option>
          </template>
        </b-form-select>
        <b-input-group size="md" class="align-items-center">
          <b-input-group-prepend>
            <icon-search class="search-icon" />
          </b-input-group-prepend>
          <b-form-input
            :id="`searchInput-${_uid}`"
            ref="searchInput"
            v-model="filter"
            class="search-input"
            type="text"
            :aria-label="$t('global.form.search')"
            :placeholder="placeholder"
            @input="onChangeInput"
          >
          </b-form-input>
          <b-button
            v-if="filter"
            variant="link"
            class="btn-icon-only input-action-btn"
            :title="$t('global.ariaLabel.clearSearch')"
            @click="onClearSearch"
          >
            <icon-close />
            <span class="sr-only">{{
              $t('global.ariaLabel.clearSearch')
            }}</span>
          </b-button>
        </b-input-group>
      </div>
    </b-form-group>
  </div>
</template>

<script>
import IconSearch from '@carbon/icons-vue/es/search/16';
import IconClose from '@carbon/icons-vue/es/close/20';

export default {
  name: 'Search',
  components: { IconSearch, IconClose },
  props: {
    placeholder: {
      type: String,
      default: function () {
        return this.$t('global.form.search');
      },
    },
    selectOptions: {
      type: Array,
      default: () => [],
    },
    showSearchBy: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      filter: null,
      searchBy: 'all',
    };
  },
  computed: {
    params() {
      const hash = window.location.hash;

      if (!hash || hash.indexOf('?') === -1) {
        return;
      }

      const paramsString = window.location.hash.split('?')[1];
      return new URLSearchParams(paramsString);
    },
  },
  created() {
    this.search();
  },
  methods: {
    onSelect() {
      this.$emit('search-by', this.searchBy);
    },
    removeSearchParam() {
      window.location.href = '/#/logs/event-logs';
    },
    search() {
      if (!this.params) {
        return;
      }

      let search = this.params.get('search');
      if (search) {
        this.filter = search;
        this.onChangeInput();
      }
    },
    onChangeInput() {
      this.$emit('change-search', this.filter);
    },
    onClearSearch() {
      this.filter = '';
      this.removeSearchParam();
      this.$emit('clear-search');
      this.$refs.searchInput.focus();
    },
  },
};
</script>

<style lang="scss" scoped>
.search-input {
  padding-left: ($spacer * 2);
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 12px;
  z-index: 4;
  stroke: gray('400');
}
.search-selector {
  font-size: 14px;
}
</style>
