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

import useHomeData from "~/composables/api/home/useHomeData";
import { motion } from "motion-v";
import useSlider from "~/composables/global/useSlider";

// state

const { data: homeData } = useHomeData();

const { nextSlide, prevSlide, slideTo, activeSlide, progress } = useSlider({
    duration: 10_000,
    count: homeData.value!.show_case_slider.length,
});

const variants = {
    hide: { opacity: 0, y: -200 },
    show: {
        opacity: 1,
        y: 0,
        transition: {
            when: "beforeChildren",
            staggerChildren: 0.15,
        },
    },
    exit: (slidesCount: number) => {
        return {
            opacity: 0,
            y: 200,
            transition: {
                when: "afterChildren",
                delay: slidesCount * 0.21,
                staggerChildren: 0.1,
                staggerDirection: 1,
            },
        };
    },
};

const childContentVariants = {
    hide: {
        filter: "blur(20px)",
        opacity: 0,
    },
    show: {
        filter: "blur(0px)",
        opacity: 1,
    },
    exit: {
        filter: "blur(20px)",
        opacity: 0,
    },
};

const childImageVariants = {
    hide: {
        filter: "blur(20px)",
        y: 70,
        scale: 0.65,
        opacity: 0,
    },
    show: {
        filter: "blur(0px)",
        y: 0,
        scale: 1,
        opacity: 1,
        transition: {
            type: "spring",
            damping: 20,
        },
    },
    exit: {
        filter: "blur(20px)",
        y: 70,
        scale: 0.65,
        opacity: 0,
        transition: {
            default: {
                type: "spring",
                damping: 20,
            },
            opacity: {
                duration: 0.1,
            },
        },
    },
};
</script>

<template>
    <section class="relative z-10 h-[115svh] min-h-[1000px] max-h-350 pb-20 bg-black overflow-y-hidden flex-center">
        <AnimatePresence mode="popLayout">
            <template
                v-for="(slide, index) in homeData!.show_case_slider"
                :key="slide.id"
            >
                <motion.div
                    v-if="activeSlide === index"
                    :initial="{ opacity: 0 }"
                    :animate="{ opacity: 1 }"
                    :exit="{ opacity: 0 }"
                    :transition="{ duration: 1 }"
                    class="absolute size-full inset-0 -z-10"
                >
                    <NuxtImg
                        :src="slide.background_image"
                        class="absolute size-full object-cover"
                        loading="lazy"
                        fetch-priority="low"
                    />
                </motion.div>
            </template>
        </AnimatePresence>

        <AnimatePresence mode="popLayout">
            <template
                v-for="(slide, index) in homeData!.show_case_slider"
                :key="slide.id"
            >
                <motion.div
                    v-if="activeSlide === index"
                    :custom="homeData!.show_case_slider.length"
                    :variants="variants"
                    initial="hide"
                    animate="show"
                    exit="exit"
                    class="size-full flex flex-col gap-20 items-center justify-center"
                >
                    <div class="flex items-center sm:gap-2 lg:gap-6 perspective-midrange">
                        <motion.div
                            :variants="childImageVariants"
                            class="origin-bottom-left"
                        >
                            <NuxtImg
                                class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
                                :src="slide.image3"
                                loading="lazy"
                                fetch-priority="low"
                                alt=""
                            />
                        </motion.div>

                        <motion.div
                            :variants="childImageVariants"
                            class="origin-bottom"
                        >
                            <NuxtImg
                                class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20"
                                :src="slide.image2"
                                loading="lazy"
                                fetch-priority="low"
                                alt=""
                            />
                        </motion.div>

                        <motion.div
                            :variants="childImageVariants"
                            class="origin-bottom-right"
                        >
                            <NuxtImg
                                class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
                                :src="slide.image1"
                                loading="lazy"
                                fetch-priority="low"
                                alt=""
                            />
                        </motion.div>
                    </div>

                    <motion.div
                        :variants="childContentVariants"
                        class="flex flex-col items-center justify-center gap-6 text-center"
                    >
                        <div class="flex items-center justify-center gap-4 sm:gap-6">
                            <button
                                @click="nextSlide"
                                class="relative"
                            >
                                <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
                                <Icon
                                    class="**:stroke-white cursor-pointer size-6 md:size-8"
                                    name="ci:arrow-right"
                                />
                            </button>

                            <div class="flex items-center flex-row-reverse gap-3 xs:gap-4">
                                <button
                                    v-for="(_slide, index) in homeData!.show_case_slider"
                                    @click="slideTo(index)"
                                    class="h-12 flex-center cursor-pointer active:scale-90 transition-transform"
                                >
                                    <div
                                        dir="ltr"
                                        :class="activeSlide === index ? 'bg-blue-500/50' : 'bg-white/15'"
                                        class="h-1 w-8 xs:w-12 md:w-16 rounded-full"
                                    >
                                        <div
                                            :class="activeSlide === index ? 'bg-blue-500' : 'bg-transparent w-full'"
                                            class="h-full transition-all"
                                            :style="{ width: `${progress}%` }"
                                        ></div>
                                    </div>
                                </button>
                            </div>

                            <button
                                @click="prevSlide"
                                class="relative"
                            >
                                <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
                                <Icon
                                    class="**:stroke-white cursor-pointer size-6 md:size-8"
                                    name="ci:arrow-left"
                                />
                            </button>
                        </div>

                        <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
                            {{ slide.title }}
                        </span>
                        <!-- <p
                            class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg"
                        >
                            {{ slide.description }}
                        </p> -->
                        <NuxtLink
                            :to="`/resellers/category/${slide.id}`"
                            class="relative"
                        >
                            <NuxtImg
                                src="/img/heymlz/heymlz-falling.gif"
                                loading="lazy"
                                fetch-priority="low"
                                class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
                            />
                            <Button
                                variant="primary"
                                end-icon="ci:arrow-left"
                                class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
                            >
                                مشاهده دسته بندی
                            </Button>
                        </NuxtLink>
                    </motion.div>
                </motion.div>
            </template>
        </AnimatePresence>
    </section>
</template>
