<template>
  <div :id="id" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active" v-if="defaultSlots.length > 0">
        <v-nodes :vnodes="defaultSlots[0]" />
      </div>
      <template v-for="(item, i) of defaultSlots" :key="'carousel-item-' + i">
        <div v-if="i > 0" class="carousel-item">
          <v-nodes :vnodes="item" />
        </div>
      </template>
    </div>
    <button class="carousel-control-prev" type="button" :data-bs-target="'#' + id" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" :data-bs-target="'#' + id" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, useSlots } from 'vue';
import { Carousel } from 'bootstrap';
import { useIds } from '@/composables/use-ids';
import VNodes from './v-nodes';

const { getId } = useIds();
const id = getId('carousel');

onMounted(() => {
  new Carousel('#' + id);
});

const slots: any = useSlots();
const defaultSlots = computed(() => slots.default?.call(this) || []);
</script>
