<template>
  <div class="row justify-between items-center no-wrap">
    <w-btn
      v-if="arrows"
      icon="fal fa-chevron-left"
      :aria-label="previousButtonLabel"
      round
      flat
      color="primary"
      size="lg"
      @click="$refs['carousel'].previous()"
    />
    <div class="justify-center full-width">
      <q-carousel
        ref="carousel"
        v-model="slide"
        class="transparent full-width"
        transition-prev="slide-right"
        transition-next="slide-left"
        animated
        swipeable
        infinite
        control-color="primary"
        :height="height"
      >
        <q-carousel-slide v-if="!children.length" class="q-pa-none row justify-evenly items-center" :name="0">
          <slot name="noChildren">
            <p>Looks like there's nothing here. Please try again later."</p>
          </slot>
        </q-carousel-slide>
        <q-carousel-slide
          v-for="_slide, slideIndex in numOfSlides"
          v-else
          :key="slideIndex"
          class="q-pa-none row justify-evenly items-center no-wrap"
          :name="slideIndex"
          style="overflow: hidden;"
        >
          <slot name="children" :children-in-slide="childrenInSlide" />
        </q-carousel-slide>
      </q-carousel>
    </div>
    <w-btn
      v-if="arrows"
      icon="fal fa-chevron-right"
      :aria-label="nextButtonLabel"
      round
      flat
      color="primary"
      size="lg"
      @click="$refs['carousel'].next()"
    />
  </div>
</template>

<script>
export default {
  props: {
    children: {
      type: Array,
      required: true,
    },
    childrenPerSlide: {
      type: Number,
      required: true,
    },
    height: {
      type: String,
      default: "300px",
    },
    arrows: {
      type: Boolean,
      default: true,
    },
    previousButtonLabel: {
      type: String,
      default: "Previous",
    },
    nextButtonLabel: {
      type: String,
      default: "Next",
    },
  },
  data () {
    return {
      slide: 0,
    };
  },
  computed: {
    numOfSlides() {
      return Math.ceil(this.children.length / this.childrenPerSlide);
    },
    childrenInSlide() {
      const start = this.slide * this.childrenPerSlide;
      return this.children.slice(start, start + this.childrenPerSlide);
    },
  }
};
</script>
