<template>
  <div class="hub-creation">
    <h1 class="hub-creation__main-title" v-if="option">{{option.home_creation_title}}</h1>
    <div class="hub-creation__content" v-if="option" v-html="option.txt_hub_creation"></div>
    <div id="head_cat"></div>
    <div class="hub-creation__cat">
      <div class="mdc-tab-bar" role="tablist">
        <div class="mdc-tab-scroller">
          <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">
              <button
                class="mdc-tab mdc-tab--active" role="tab" aria-selected="true"
                data-tax="all"
                @click="activeTax = 'all'"
                tabindex="0"
              >
                <span class="mdc-tab__content">
                  <span class="mdc-tab__text-label">All</span>
                </span>
                <span class="mdc-tab-indicator mdc-tab-indicator--active">
                  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                </span>
                <span class="mdc-tab__ripple"></span>
              </button>

              <button
                class="mdc-tab" role="tab" aria-selected="false"
                v-for="(items, index) in tax"
                v-bind:key="items.ID"
                :data-tax="items.slug"
                @click="activeTax = items.slug"
                :tabindex="index + 1"
              >
                <span class="mdc-tab__content">
                  <span class="mdc-tab__text-label">{{items.name}}</span>
                </span>
                <span class="mdc-tab-indicator">
                  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                </span>
                <span class="mdc-tab__ripple"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hub-creation__slide--wraper" >
      <transition-group name="creationAnimation" tag="div" class="article_pages_wraper page_visible">
        <div
          class="hub-creation__slide mdc-card mdc-ripple-upgraded mdc-card__primary-action creationAnimation"
          v-for="(items) in creations"
          :key="items.id"
          v-if="activeTax === 'all' || (setData(items.pure_taxonomies.Type).indexOf(activeTax) !== -1)"
        >
          <TemplateCreation :content="items"/>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import TemplateCreation from '~/components/creation/templateCreation.vue';

export default {
  data : function () {
    return {
      activeTax : 'all',
    }
  },
  components: {
    TemplateCreation
  },
  computed: {
    ...mapState({
      creations:state => state.creations.data,
      tax:state       => state.creations.tax,
      option:state    => state.option.data,
    }),
  },
  methods: {
    m_init: function () {
      if (document) {
        const MDC = this.$MDC;

        const tabBar = new MDC.TabBar(document.querySelector('.mdc-tab-bar'));

        const ripples = document.querySelectorAll('.mdc-ripple-surface, .mdc-ripple-upgraded, .mdc-tab__ripple');

        if (ripples.length > 0) {
          ripples.forEach(function (riple) {
            MDC.Ripple.attachTo(riple);
          })
        }
      }
    },

    setData: function (data, id) {
      const data_new = ['all']

      if (!data) {
        return data_new
      }

      data.forEach(function(element) {
        data_new.push(element.slug)
      });

      return data_new
    },

  },
  mounted(){
    this.m_init();
  },
}
</script>
<style media="screen" lang="scss">

  .flip-list-move {
    transition: transform 1s;
  }
  .creationAnimation {
    transform-origin: 10% 50%;
    z-index: 1;

    &-move { transition: all 600ms ease-in-out 50ms }
    &-enter-active { transition: all 300ms ease-out }

    &-leave-active {
      transition: all 300ms ease-in;
      position: absolute;
      z-index: 0;
      top: 75%;
      left: 20%;
    }

    &-enter,
    &-leave-to { opacity: 0 }
    &-enter { transform: scale(0.9) }
  }

  .hub-creation__slide--wraper{
    transition: min-height 1s ease;
  }

  .hub-creation__slide--wraper{
    height: auto;
    min-height: 500px;
  }
</style>