import Vue from 'vue'
import './SntCarousel.scss'
import { VCarousel, VCarouselItem } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntCarousel',
  components: { VCarousel, VCarouselItem },
  props: {
    value: {
      type: [String, Number],
      default: 0
    },
    items: {
      type: Array,
      default: () => ([])
    },
    height: {
      type: [String, Number],
      default: () => '400px'
    },
    showArrows: {
      type: Boolean,
      default: true
    },
    showArrowsOnHover: {
      type: Boolean,
      default: true
    },
    hideDelimiters: {
      type: Boolean,
      default: true
    },
    hideDelimiterBackground: {
      type: Boolean,
      default: true
    },
    interval: {
      type: [String, Number],
      default: 6000
    },
    cycle: {
      type: Boolean,
      default: false
    },
    contain: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    slides () {
      return this.items.map((item, i) => this.$_.defaults(
        this.$_.cloneDeep(item),
        {
          sequence: i + 1,
          src: '',
          href: '',
          label: '',
          visible: true
        }
      )).filter((item) => item.visible)
    }
  },
  template: `
    <v-carousel
      v-bind="$attrs"
      :value="value"
      :height="height"
      :show-arrows="showArrows"
      :show-arrows-on-hover="showArrowsOnHover"
      :hide-delimiters="hideDelimiters"
      :hide-delimiter-background="hideDelimiterBackground"
      :interval="interval"
      :cycle="cycle"
      class="snt-carousel"
      v-on="$listeners">
      <template v-for="(slide, i) in slides">
        <v-carousel-item
          :key="'carousel-slide-'+i"
          :src="slide.src"
          :href="slide.href ? slide.href : null"
          :contain="contain">
          <slot
            name="label"
            :item="slide"
            :index="i">
            <div>{{ slide.label }}</div>
          </slot>
        </v-carousel-item>
      </template>
    </v-carousel>
  `
})
