<template>
  <div
    :class="[getModifiersClass('c-carousel', modifiers), { 'c-carousel--has-progress-bar': isProgressBar }, { 'c-carousel--has-part-width-slides': perView % 1 != 0 }]"
    ref="carousel" class="swiper" data-type="carousel"
    :data-pagination-type="isProgressBar ? 'bullets' : paginationType" :data-per-view="perView"
    :data-autoplay="autoPlay" data-controls="true">
    <div class="c-carousel__track swiper-wrapper">
      <slot />
    </div>
    <div v-if="paginationType === 'bullets' || isProgressBar" class="c-carousel__navigation">
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

  <div v-if="paginationType === 'custom'" thumbsSlider="" ref="sliderCarousel" class="swiper swiper-thumbnails"
    :data-autoplay="autoPlay" data-controls="true">
    <div class="c-carousel__track swiper-wrapper">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './carousel.config';
import { onMounted, ref, useTemplateRef } from 'vue';
import useComponentModifiers from '../../composable/useComponentModifiers';
import Carousel from './carousel';

const { paginationType = 'bullets' } = defineProps<{
  paginationType?: 'progressbar' | 'bullets' | 'custom';
  perView?: number;
  autoPlay?: boolean;
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();

const isProgressBar = ref(paginationType === 'progressbar')
const carousel = useTemplateRef('carousel');

onMounted(() => {
  new Carousel(document, carousel.value);
});
</script>
