<template>
  <div class="page products--page latin-digits">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <h2 class="title">{{ staticData.s1.t1 }}</h2>
          <p>{{ staticData.s1.t2 }}</p>
        </div>
      </div>
    </section>
    <section class="s2">
      <div class="container">
        <div class="filters anim-fadeIn">
          <h2 class="title title-subtitle">{{ staticData.s2.t1 }}</h2>
          <ul>
            <li @click="filtering(false)">
              <p class="active">{{ staticData.s2.t3 }}</p>
            </li>
            <li
                v-for="item in productCategories"
                :key="item._id"
                @click="filtering(item._id)">
              <p>{{ item.category_details[$route.params.lang].name }}</p>
            </li>
          </ul>
        </div>
        <div class="row products-container" v-if="filtered_products.length">

          <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-5 anim-fadeIn" v-for="item in filtered_products" :key="item._id">
            <nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
              <div class="imgBox">
                <img :src="item.thumb" :alt="item.product_details[$route.params.lang].name">
              </div>
              <h4>{{ item.product_details[$route.params.lang].name }}</h4>
              <p>{{ item.product_details[$route.params.lang].short_description }}</p>
            </nuxt-link>
          </div>

        </div>
        <div class="row" v-else>
          <div class="col-12 products-container">
            <p class="no-product anim-fadeIn">{{ staticData.s2.t2 }}</p>
          </div>
        </div>
      </div>
    </section>
    <section class="s3">
      <div class="container">
        <div class="panel anim-fadeIn">
          <h2 class="title title-shape-center">
            {{ staticData.s3.t1 }}
            <span class="subtitle">{{ staticData.s3.t2 }}</span>
          </h2>
          <p>{{ staticData.s3.t3 }}</p>
          <a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s3.t4 }}</a>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {fadeInAnimation} from "~/mixins/animations"

export default {
  data() {
    return {
      products: null,
      productCategories: null,
      catalog: null,
      filter: false
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.products[this.$route.params.lang]
    },
    filtered_products() {
      if (!this.filter) return this.products
      else return this.products.filter(item => item.category === this.filter)
    }
  },
  methods: {
    filtering(key) {
      $('.products--page .filters p').removeClass('active')
      $(event.target).addClass('active')

      this.$gsap.timeline({
        yoyo: true,
        repeat: 1
      })
          .to($('.products--page .products-container'),
              {
                opacity: 0,
                duration: 0.3,
                onComplete: () => {
                  this.filter = key
                }
              })
    }
  },
  mixins: [fadeInAnimation],
  head() {
    return {
      title: this.staticData.hero
    }
  },
  async asyncData({$axios, store, error}) {
    try {
      const products = await $axios.get(`/api/public/products`)
      const productCategories = await $axios.get(`/api/public/productCategories`)
      const catalog = await $axios.get('/api/public/catalog')

      return {
        products: products.data,
        productCategories: productCategories.data,
        catalog: catalog.data
      }
    } catch (e) {
      error({status: 404, message: 'There is a problem here'})
    }
  }
}
</script>
