<template>
  <div class="slideshow_wrapper fullwidth" :style="'--bullets-color: ' + _bulletsColor + '; --arrows-color: ' + _arrowsColor">
    <swiper :options="swiperOption" ref="mySwiper" :classe="_classe">
      <!--div class="swiper-wrapper"-->
        <slot />
      <!--/div-->
    </swiper>
      <div v-if="_showArrows" :class="'fas fa-chevron-left swiper-button-prev '+_classe+'prv'" slot="button-prev"></div>
      <div v-if="_showArrows" :class="'fas fa-chevron-right swiper-button-next '+_classe+'nxt'" slot="button-next"></div>
      <div v-if="_showBullets" :class="'swiper-pagination swiper-pagination-bullets '+_classe" slot="pagination"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

import { isTablet, isMobile } from 'mobile-device-detect';
import { swiper } from 'vue-awesome-swiper'

export default Vue.extend({
  name: 'Slideshow',
  components: { swiper },
  data() {
      return {
          swiperOption : {
            loop: true,
            lazy: true,
            slidesPerView: 0
            //centeredSlides: true,
            //spaceBetween: 0,
           }
      }
  },
  props: {
    nr_visible_items: {
      type: Object
    },
    bulletsColor: {
      type: String
    },
    arrowsColor: {
      type: String
    },
    classe: {
      type: String
    },
    showArrows: {
      type: Boolean
    },
    showBullets: {
      type: Boolean
    }
  },
  methods: {
    _slidesPerView():number {
        return 1
      }
  },
  created() {
    this.$data['slidesPerView'] = this._slidesPerView()
    if (this.showArrows === undefined || this.showArrows === null) {
    } else {
        this.$data[ 'swiperOption["navigation"]' ] = {
            nextEl: '.swiper-button-next.'+ this.classe+'nxt',
            prevEl: '.swiper-button-prev.'+ this.classe+'prv'
        }
    }
    if (this.showBullets === undefined || this.showBullets === null) {
    } else {
        this.$data[ 'swiperOption["navigation"]' ] = {
            el: '.swiper-pagination.'+ this.classe,
            clickable: true
        }
    }
    /*if (this.autoplay === undefined || this.autoplay === null) {
    } else {
        this.swiperOption["autoplay"] = {
        delay: 1000,
        disableOnInteraction: false
        }
    }*/
  },
  computed: {
    isDesktop() {
        return !isMobile
    },
    isTablet() {
        return isTablet
    },
    _arrowsColor():string {
        if (this.arrowsColor === undefined || this.arrowsColor === null) {
          return "#000"
        } else {
          return this.arrowsColor
        }
    },
    _bulletsColor():string {
        if (this.bulletsColor === undefined || this.bulletsColor === null) {
          return "#000"
        } else {
          return this.bulletsColor
        }
    },
    _classe():string {
        return this.classe
    },
    _showArrows():boolean {
        if (this.showArrows === undefined || this.showArrows === null) {
          return false
        } else {
          if(!this.showArrows) {
            return false
          }
          else
            return true
        }
    },
    _showBullets():boolean {
        if (this.showBullets === undefined || this.showBullets === null) {
          return false
        } else {
          if(!this.showBullets) {
            return false
          }
          else
            return true
        }
    }
    /*_nr_visible_items() {
        return this.nr_visible_items
    }*/
  }
})
</script>

<style lang="scss">

</style>