<template>
  <div class="page signup-page products">
    <div class="container bg-products">
      <b-row class="sticky-top bg-white pb-1">
        <b-col cols="12">
          <product-filter
            v-model="filters"
            @search-product="searchProduct"
            @clear-search-text="clearSearchText"
            :show-categories-selection="true"
          />
        </b-col>
      </b-row>
      <b-row align-h="between">
        <b-col cols="12" class="pb-3">
          <div class="eshop-products-wrapper">
            <product-list
              identifier="byDzyne-products"
              :simple="false"
              :allow-disable="false"
              :products-getter="getProducts"
              :product-quantity-getter="getCartProductQuantity"
              :default-sale-type-keys="['registration']"
              class="m-0 px-3"
              loading-check="byDzyne-products"
            >
              <template slot="spinner">
                <div></div>
              </template>
            </product-list>
            <pagination
              :disabled="isLoading('byDzyne-products')"
              class="eshop-pagination text-center"
              name="byDzyne-products"
              :total="getProductTotal"
              :per-page="12"
              data-qa-prefix="productPage"
            />
          </div>
        </b-col>
      </b-row>
    </div>
  </div>
</template>
<script>
import ProductFilter from '@@/app/_global/components/elements/ProductFilter'
import ProductList from '@/app/_global/components/elements/ProductList'
import Pagination from '@/app/_global/components/elements/Pagination'
import { productsMixin, cartCountMixin } from '@@/app/_global/mixins'
import { mapActions } from 'vuex'
import { mapMasterData } from '@/app/_global/mixins'

export default {
  name: 'MembershipPage',
  mixins: [productsMixin, cartCountMixin],
  components: { ProductFilter, ProductList, Pagination },
  computed: {
    ...mapMasterData({
      SALE_TYPES: {},
      PRODUCT_AND_KITTING_FILTERS: {
        ekbdFilterKey: { name: 'PRODUCT_FILTER_EKBD', type: 'key' },
      },
    }),
  },
  watch: {
    getCartTotal() {
      this.resetError('cartError')
    },
    '$route.params.page': {
      async handler() {
        this.loadProductList()
      },
    },
    filters: {
      async handler() {
        await this.resolveMasters
        this.productFilters = [this.ekbdFilterKey]
        this.loadProductList()
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions(['resetError']),
  },
}
</script>
