<template>
  <div class="sf-hero">
    <div ref="glide" class="glide">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides sf-hero__slides">
          <!--@slot default slot for SfHeroItem tags -->
          <slot />
        </ul>
      </div>
    </div>
    <div v-if="numberOfPages > 1" class="sf-hero__control--left">
      <!--@slot slot for icon moving to the previous item -->
      <slot name="prev" v-bind="{ go: () => go('prev') }">
        <SfArrow
          class="sf-arrow sf-arrow--transparent"
          aria-label="previous"
          @click.stop="go('prev')"
        >
          <img
            class="sf-arrow__icon"
            src="~/@highdigital/vuet/public/assets/storybook/icons/icon_arrow-left.svg"
          />
        </SfArrow>
      </slot>
    </div>
    <div v-if="numberOfPages > 1" class="sf-hero__control--right">
      <!-- @slot slot for icon moving to the next item  -->
      <slot name="next" v-bind="{ go: () => go('next') }">
        <SfArrow
          class="sf-arrow sf-arrow--right sf-arrow--transparent"
          aria-label="next"
          @click.stop="go('next')"
        >
          <img
            class="sf-arrow__icon"
            src="~/@highdigital/vuet/public/assets/storybook/icons/icon_arrow-left.svg"
          />
        </SfArrow>
      </slot>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import SfHeroItem from "./_internal/SfHeroItem.vue";
import SfArrow from "../../atoms/SfArrow/SfArrow.vue";
//import SfBullets from "../../atoms/SfBullets/SfBullets.vue";
import Glide from "@glidejs/glide";
Vue.component("SfHeroItem", SfHeroItem);
export default {
  name: "SfHero",
  components: {
    SfArrow,
    //SfBullets,
  },
  props: {
    /**
     * Slider options like glide.js (https://glidejs.com/docs/)
     */
    sliderOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      glide: null,
      defaultOptions: {
        type: "slider",
        rewind: true,
        autoplay: 5000,
        perView: 1,
        gap: 0,
      },
    };
  },
  computed: {
    mergedOptions() {
      return {
        ...this.defaultOptions,
        ...this.sliderOptions,
      };
    },
    numberOfPages() {
      return this.$slots.default
        ? this.$slots.default.filter((slot) => slot.tag).length
        : 0;
    },
    page() {
      if (this.glide) {
        return this.glide.index + 1;
      }
      return 1;
    },
  },
  mounted() {
    if (this.numberOfPages > 1) {
      this.$nextTick(() => {
        if (!this.$slots.default) return;
        const glide = new Glide(this.$refs.glide, this.mergedOptions);
        glide.mount();
        this.glide = glide;
      });
    }
  },
  methods: {
    go(direct) {
      if (!this.glide) return;
      switch (direct) {
        case "prev":
          this.glide.go("<");
          break;
        case "next":
          this.glide.go(">");
          break;
        default:
          this.glide.go(`=${direct}`);
          break;
      }
    },
  },
};
</script>
<style lang="scss">
@import "~@highdigital/sharedt/styles/components/organisms/SfHero.scss";
</style>
