<script setup lang="ts">

// import

import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";

// state

const swiper_instance = ref<SwiperClass | null>(null);

const slides = [
    {
        id: 0,
        title: "TEST"
    },
    {
        id: 1,
        title: "TEST"
    },
    {
        id: 2,
        title: "TEST"
    },
    {
        id: 3,
        title: "TEST"
    },
    {
        id: 4,
        title: "TEST"
    }
];

// methods

const onSwiper = (swiper: SwiperClass) => {
    swiper_instance.value = swiper;
};

const onChange = (swiper: SwiperClass) => {
    console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex);
};

</script>

<template>
    <div class="w-full mb-20">
        <div
            class="relative"
        >
            <Swiper
                :slides-per-view="1.2"
                :loop="true"
                :space-between="40"
                :centered-slides="true"
                @swiper="onSwiper"
                @slide-change="onChange"
            >
                <SwiperSlide
                    v-for="slide in slides"
                    :key="slide.id"
                >
                    <div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
                        <img
                            class="absolute inset-0 size-full object-cover"
                            src="/img/hero-bg.jpg"
                            alt=""
                        />
                        <div class="size-full absolute z-10 bg-linear-to-t from-black to-transparent" />
                        <div class="px-20 absolute z-10 w-full bottom-36">
                            <div class="border-b border-white/10 pb-6">
                                <h3 class="typo-hero-1 text-white">
                                    Samsung {{ slide.id }}
                                </h3>
                                <div class="flex justify-between items-end">
                                <span class="typo-p-lg text-white">
                                    توضیحات درمورد این محصول خاص
                                </span>
                                    <Button class="invert rounded-full hover:bg-transparent">
                                        خرید Samsung
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>
            <div class="absolute w-full bottom-20 left-[50%] translate-x-[-50%] z-100">
                <div class="container h-full">
                    <div class="h-full flex items-center justify-between px-20">
                        <button @click="swiper_instance?.slidePrev()">
                            <Icon
                                class="**:stroke-white cursor-pointer"
                                name="ci:arrow-right"
                                size="24"
                            />
                        </button>
                        <div class="flex items-center justify-center gap-3 text-white">
                            <div
                                v-for="(slide, index) in slides"
                                :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
                                class="border border-white size-3 rounded-full transition-all duration-200"
                                @click="swiper_instance?.slideTo(index)"
                            >
                            </div>
                        </div>
                        <button>
                            <Icon
                                @click="swiper_instance?.slideNext()"
                                class="**:stroke-white cursor-pointer"
                                name="ci:arrow-left"
                                size="24"
                            />
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>