<template>
    <ion-page>
        <ion-content :fullscreen="true" ref="content">
            <div ref="el" class="w-full h-full">
                <VueSwiper
                    :initialSlide="0"
                    :slides-per-view="1"
                    :space-between="0"
                    :loop="true"
                    :pagination="true"
                    :autoplay="false"
                    direction="vertical"
                    @swiper="onSwiper"
                    :modules="[Navigation, Pagination, Scrollbar, A11y]"
                    class="w-full h-full"
                >
                    <swiper-slide v-slot="{ isActive }"
                        v-for="n in 10"
                        :key="n"
                        class="w-full h-full"
                    >
                        <PlayView :active="isActive" />
                    </swiper-slide>
                </VueSwiper>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
} from "@ionic/vue";
import { Swiper as VueSwiper, SwiperSlide } from "swiper/vue";
import { Swiper } from "swiper";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import PlayView from "@/components/PlayView.vue";
import { ref } from "vue";
import { useElementBounding } from "@vueuse/core";

const el = ref<HTMLElement | null>(null);
const { x, y, top, right, bottom, left, width, height } =
    useElementBounding(el);

const swiper = ref<Swiper | null>(null);
const onSwiper = (sw: Swiper) => {
    window.swiper = swiper.value = sw;
};
</script>
