<template>
  <div>
    <b-row v-if="selectedCategoryName" class="my-2 px-1">
      <b-col cols="12" lg="6">
        <small><icon name="caret-right"></icon> {{ selectedCategoryName }}</small>
      </b-col>
    </b-row>
    <b-row class="my-2 px-1">
      <b-col cols="12" lg="6">
        <b-row>
          <b-col cols="5" order="1" v-if="showCategoriesSelection">
            <b-form-select
              v-model="filters.selectedCategory"
              :options="getProductMainCategoriresOptions"
              class="mb-3 custom-select"
            />
          </b-col>
          <b-col :cols="showCategoriesSelection ? '7' : '12'" order="0">
            <b-input-group @keyup.13="searchProduct">
              <b-form-input
                class="border-right-0 mv-100"
                :value="filters.search"
                @keyup.13="searchProduct"
                @change="updateSearch"
                :placeholder="$t('Eshop.Header.Search.Placeholder')"
                :disabled="isLoading(isLoadingItems)"
              />
              <b-input-group-append>
                <b-btn
                  v-if="filters.search !== ''"
                  variant="link"
                  @click="clearSearchText"
                  class="border-light border-left-0"
                >
                  <icon name="clear-icon" />
                </b-btn>
                <b-btn
                  variant="primary"
                  class="border-0 rounded-0"
                  @click="searchProduct"
                  :disabled="isLoading(isLoadingItems) || filters.search === ''"
                >
                  <icon name="search" />
                </b-btn>
              </b-input-group-append>
            </b-input-group>
          </b-col>
        </b-row>
      </b-col>
      <b-col cols="12" lg="6">
        <b-row align-h="end">
          <b-col cols="12" lg="auto" class="mr-lg-n4 my-md-d-2">
            <b-form-group
              class="mb-0"
              label-cols="4"
              :label="$t('Eshop.SortBy.Title')"
              :label-for="$t('Eshop.SortBy.Title')"
            >
              <b-form-select v-model="filters.selectedSort" @input="setSorting" :options="sortOptions" />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="2" lg="auto">
            <b-button @click="displayGridOn" :variant="displayGrid ? 'primary' : 'link'">
              <icon name="th-large" />
            </b-button>
            <b-button @click="displayGridOff" :variant="!displayGrid ? 'primary' : 'link'">
              <icon name="bars" />
            </b-button>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ProductFilter',
  watch: {
    filters: {
      async handler(to) {
        if (parseInt(this.$helpers.getValue(this.$route, 'params.page', 1)) !== 1) {
          await this.$router.push({ name: this.$route.name, params: { page: 1 } }, async () => {
            to.resetPage = true
            await this.emit(to)
          })
        } else {
          to.resetPage = false
          this.emit(to)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    selectedCategoryName: {
      type: [String, Boolean],
      default: false,
    },
    showCategoriesSelection: {
      type: Boolean,
      default: false,
    },
    isLoadingItems: {
      type: [Array, String],
      default: 'byDzyne-products',
    },
    layoutBlockName: {
      type: String,
      default: 'byDzyne-products',
    },
  },
  data() {
    return {
      filters: {
        search: '',
        selectedSort: 2,
        selectedCategory: null,
        displayGrid: this.displayGrid,
      },
      sortOptions: [
        { value: 2, text: this.$t('Eshop.SortBy.Latest') },
        { value: 4, text: this.$t('Eshop.SortBy.PriceHighToLow') },
        { value: 5, text: this.$t('Eshop.SortBy.PriceLowToHigh') },
        { value: 6, text: this.$t('Eshop.SortBy.CVHighToLow') },
        { value: 7, text: this.$t('Eshop.SortBy.CVLowToHigh') },
      ],
    }
  },
  async mounted() {
    this.filters.selectedSort = this.getProductSortOrder === 1 ? 2 : this.getProductSortOrder
    if (!this.hasLoaded('categoriesLoading')) {
      if (this.selectedCategoryName !== '') {
        await this.loadProductCategories()
      }
    }
  },
  computed: {
    ...mapGetters('eshop', ['getProductSortOrder', 'getProductMainCategoriresOptions']),
    ...mapGetters(['isLoading', 'isLoggedInGuest', 'getLayoutMode', 'hasLoaded']),
    displayGrid() {
      return this.getLayoutMode(this.layoutBlockName, 'grid') === 'grid'
    },
  },
  methods: {
    ...mapActions(['layoutBlocks']),
    ...mapActions('eshop', ['setProductSortOrder', 'loadProductCategories']),
    setSorting() {
      this.setProductSortOrder(this.filters.selectedSort)
    },
    updateSearch(value) {
      this.filters.search = value
    },
    searchProduct() {
      this.$emit('search-product')
    },
    clearSearchText() {
      this.filters.search = ''
      this.$emit('clear-search-text')
    },
    displayGridOn() {
      this.layoutBlocks({ block: this.layoutBlockName, layout: 'grid' })
    },
    displayGridOff() {
      this.layoutBlocks({ block: this.layoutBlockName, layout: 'list' })
    },
    emit(to) {
      this.$emit('input', to)
    },
  },
}
</script>
