<template>
  <div class="enrol-filters border-bottom">
    <b-form-row align-h="between">
      <b-col v-if="filterOptions.length" cols="6" lg="3" order="1">
        <b-form-select
          v-model="filters.selectedCategory"
          :options="filterOptions"
          @change="updateSearchFilter"
          class="mb-3 custom-select"
          data-qa="category-select"
        />
      </b-col>
      <b-col :cols="(filterOptions.length && 6) || 12" :md="(filterOptions.length && 6) || 'auto'" lg="3" order="2">
        <b-form-select
          v-model="filters.selectedSort"
          :options="sortOptions"
          @change="updateSearchFilter"
          class="mb-3 custom-select"
          data-qa="filter-select"
        />
      </b-col>
      <b-col cols="auto" order="3" class="flex-grow-1">
        <b-form-input
          v-model="filters.search"
          @input="updateSearchFilter"
          type="text"
          :placeholder="$t('Enrolment.Placeholder.SearchKeyword')"
          class="mb-3 custom-control-label"
          data-qa="search-field"
        />
      </b-col>
      <b-col cols="12" lg="2" order="4" class="mb-4">
        <b-button
          block
          @click="clearFilters"
          variant="outline-input-light"
          :disabled="!isDirty"
          :class="{ 'c-disabled': !isDirty }"
          data-qa="clear-btn"
        >
          {{ $t('Common.Clear') }}
        </b-button>
      </b-col>
    </b-form-row>
  </div>
</template>

<script>
export default {
  name: 'ProductFilter',
  data() {
    return {
      // TODO: Jack: remove perPage here to avoid dependency, modify selectedCategory return response
      filters: {
        selectedSort: 2,
        selectedCategory: null,
        search: '',
        perPage: 12,
      },
      sortOptions: [
        { value: null, text: this.$t('Eshop.SortBy.Title'), disabled: true },
        // { value: 1, text: this.$t('Eshop.SortBy.BestSelling') },
        { value: 2, text: this.$t('Eshop.SortBy.Latest') },
        { value: 4, text: this.$t('Eshop.SortBy.PriceHighToLow') },
        { value: 5, text: this.$t('Eshop.SortBy.PriceLowToHigh') },
        // TODO: take out temporarily to do sort by cv
        // {value: 6, text: this.$t('Eshop.SortBy.CVHighToLow')},
        // {value: 7, text: this.$t('Eshop.SortBy.CVLowToHigh')}
      ],
      isDirty: false,
    }
  },
  props: {
    filterOptions: { type: Array, default: () => [] },
    filterSetter: { type: Function },
    loadProductBypass: { type: Function },
    immediateUpdate: { type: Boolean, default: false },
  },
  async mounted() {
    if (this.immediateUpdate) {
      await this.setFilterData()
    }
  },
  methods: {
    clearFilters() {
      this.filters.search = ''
      this.filters.selectedCategory = null
      this.filters.selectedSort = 2
      this.updateSearchFilter()
      this.isDirty = false
    },
    async updateSearchFilter() {
      this.isDirty = true
      await this.setFilterData()
      if (this.$route.params.page === undefined) {
        this.$route.params.page = 1
      }
      if (parseInt(this.$route.params.page) === 1 && this.loadProductBypass) {
        this.loadProductBypass()
      }
    },
    async setFilterData() {
      if (this.filterSetter) {
        await this.filterSetter({ ...this.filters })
      } else {
        this.$emit('filter-update', { ...this.filters })
      }
    },
  },
}
</script>
