<script setup lang="ts">

// import

import useHomeData from "~/composables/api/home/useHomeData";

// state

const { data: homeData } = useHomeData();

const clipPathPercent = ref(49);

const activeSlideVideo = ref<"left" | "right" | "none">("none");

const draggableEl = ref<HTMLElement | null>(null);
const previewContainerEl = ref<HTMLElement | null>(null);

const { x: dragAxisX } = useDraggable(draggableEl, {
    initialValue: { x: 0, y: 0 },
    axis: "x"
});

// watch

watch(() => clipPathPercent.value, (newValue) => {
    if (newValue > 80) {
        activeSlideVideo.value = "right";
    } else if (newValue < 20) {
        activeSlideVideo.value = "left";
    } else {
        activeSlideVideo.value = "none";
    }
});

watch(
    () => dragAxisX.value,
    (newValue) => {
        const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
        const percent = clientRect.width / 100;
        const clipPercent = ((newValue + draggableEl.value!.clientWidth / 2) - clientRect.x - 8) / percent;
        if (clipPercent >= 5 && clipPercent <= 95) {
            clipPathPercent.value = clipPercent;
        }
    }
);
</script>

<template>
    <div class="container">
        <div>
            <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
                <span class="typo-p-sm md:typo-p-md text-slate-500">مقایسه محصولات</span>
                <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
                تفاوت محصلات ما را ببینید
            </span>
            </div>
            <div
                ref="previewContainerEl"
                class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
            >
                <Transition name="fade">
                    <img
                        v-if="activeSlideVideo !== 'right'"
                        :src="homeData!.difreance_section.image1"
                        class="select-none absolute size-full object-cover brightness-[95%]"
                        :alt="homeData!.difreance_section.title1"
                    />
                    <video
                        v-else
                        autoplay
                        muted
                        playsinline
                        webkit-playsinline
                        src="/video/vid-3.mp4"
                        class="select-none absolute size-full object-cover brightness-[95%]"
                    />
                </Transition>

                <div class="absolute size-full right-0 w-full">
                    <Transition name="fade">
                        <img
                            v-if="activeSlideVideo !== 'left'"
                            :src="homeData!.difreance_section.image2"
                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
                            :alt="homeData!.difreance_section.title2"
                        />
                        <video
                            v-else
                            autoplay
                            muted
                            playsinline
                            webkit-playsinline
                            src="/video/vid-3.mp4"
                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
                        />
                    </Transition>
                    <div
                        :style="{
                        left: `${clipPathPercent}%`,
                    }"
                        class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
                    >
                        <div
                            ref="draggableEl"
                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
                        >
                            <Icon
                                name="ci:arrows"
                                size="24"
                                class="**:stroke-white"
                            />
                        </div>
                    </div>
                </div>

                <div
                    class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
                >
                    <div class="flex flex-col gap-2 text-black">
                    <span class="typo-p-sm md:typo-p-md">
                        {{ homeData!.difreance_section.description1 }}
                    </span>
                        <NuxtLink
                            :to="homeData!.difreance_section.link1"
                            class="typo-h-6 md:typo-h-5 lg:typo-h-3"
                        >
                            {{ homeData!.difreance_section.title1 }}
                        </NuxtLink>
                    </div>
                    <div class="flex flex-col gap-2 text-black">
                    <span class="typo-p-sm md:typo-p-md text-end">
                        {{ homeData!.difreance_section.description2 }}
                    </span>
                        <NuxtLink
                            :to="homeData!.difreance_section.link2"
                            class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
                        >
                            {{ homeData!.difreance_section.title2 }}
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>

        <div class="h-80"></div>

    </div>
</template>

<style>
.overlay-image {
    clip-path: polygon(
        v-bind('clipPathPercent + "%"') 0,
        100% 0,
        100% 100%,
        v-bind('clipPathPercent + "%"') 100%
    );
}
</style>
