<script setup lang="ts">
// imports

import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";
import { EffectCoverflow } from "swiper/modules";

// state

const { data: homeData } = useHomeData();

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

const slideElement = ref<HTMLDivElement | null>(null);
const { width: slideWidth } = useElementSize(slideElement);

// computed

const slides = computed(() => {
    return [...homeData.value!.main_categories, ...homeData.value!.main_categories];
});

// methods

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

const onSlideChange = (swiper: SwiperClass) => {
    activeIndex.value = swiper.realIndex;
};
</script>

<template>
    <section
        ref="sectionTarget"
        class="flex flex-col justify-center gap-4 bg-black sm:min-h-[110svh] relative overflow-hidden shrink-0 py-24 lg:py-32"
    >
        <div class="w-full relative flex-center z-10 container">
            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
        </div>

        <div class="w-full mt-44 lg:mt-64 relative">
            <NuxtImg
                class="aspect-square w-[210px] sm:w-[240px] md:w-[300px] lg:w-[350px] 2xl:w-[420px] translate-y-[-136px] sm:translate-y-[-156px] md:translate-y-[-195px] lg:translate-y-[-228px] 2xl:translate-y-[-273px] absolute left-1/2 -translate-x-1/2 z-10"
                :style="{
                    filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                }"
                loading="lazy"
                fetch-priority="low"
                src="/img/heymlz/heymlz-category-seat.gif"
            />
            <Swiper
                :loop="true"
                :centered-slides="true"
                :slides-per-view="1.5"
                @swiper="onSwiper"
                @slideChange="onSlideChange"
                :modules="[EffectCoverflow]"
                :effect="'coverflow'"
                :coverflowEffect="{
                    rotate: 10,
                    stretch: -100,
                    depth: 200,
                    modifier: 1,
                    slideShadows: true,
                }"
                :breakpoints="{
                    320: {
                        coverflowEffect: {
                            stretch: -50,
                        },
                        slidesPerView: 1.75,
                        centeredSlides: true,
                    },
                    640: {
                        coverflowEffect: {
                            stretch: -100,
                        },
                        centeredSlides: true,
                        slidesPerView: 2.65,
                    },
                    1024: {
                        coverflowEffect: {
                            stretch: -100,
                        },
                        centeredSlides: true,
                        slidesPerView: 3.65,
                    },
                    2000: {
                        coverflowEffect: {
                            stretch: -100,
                        },
                        centeredSlides: true,
                        slidesPerView: 4,
                    },
                    3000: {
                        coverflowEffect: {
                            stretch: -100,
                        },
                        centeredSlides: true,
                        slidesPerView: 6,
                    },
                }"
            >
                <SwiperSlide
                    ref="slideElement"
                    v-for="(slide, index) in slides"
                    :key="slide.id"
                >
                    <CategoryCard
                        dark-layer
                        :id="slide.id"
                        :slug="slide.slug"
                        :category="slide.name"
                        :video="slide.video ?? ''"
                        :picture="slide.image ?? ''"
                        :count="slide.product_count"
                        :isActive="activeIndex === index"
                        description="توضیحات دسته بندی"
                    />
                </SwiperSlide>
            </Swiper>

            <div
                v-if="!swiper_instance?.isBeginning"
                @click="swiper_instance?.slidePrev()"
                :style="{
                    right: `calc(50% - ${slideWidth / 2}px - 20px)`,
                }"
                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
            >
                <Icon
                    name="ci:arrow-right"
                    class="**:stroke-black size-5 xs:size-6"
                />
            </div>

            <div
                v-if="!swiper_instance?.isEnd"
                @click="swiper_instance?.slideNext()"
                :style="{
                    left: `calc(50% - ${slideWidth / 2}px - 20px)`,
                }"
                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
            >
                <Icon
                    name="ci:arrow-left"
                    class="**:stroke-black size-5 xs:size-6"
                />
            </div>
        </div>

        <div class="w-full flex justify-center items-center mt-14">
            <NuxtLink to="/category">
                <Button
                    variant="primary"
                    class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
                    end-icon="ci:arrow-left"
                >
                    مشاهده همه دسته ها
                </Button>
            </NuxtLink>
        </div>
    </section>
</template>
