<script setup lang="ts">

// import

import { useDraggable } from "@vueuse/core";

// state

const clipPathPercent = ref(49);

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(() => dragAxisX.value, (newValue) => {
    const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
    const percent = clientRect.width / 100;
    const clipPercent = (newValue - clientRect.x - 8) / percent;
    if (clipPercent >= 5 && clipPercent <= 95) {
        clipPathPercent.value = clipPercent;
    }
});

</script>

<template>
    <div class="container">
        <div class="flex flex-col items-center gap-3 mb-16">
            <span class="typo-p-md text-slate-500">یک متن تست لورم</span>
            <span class="typo-h-3 text-black">تفاوت محصول را ببینید در اینجا</span>
        </div>
        <div ref="previewContainerEl" class="rounded-200 overflow-hidden h-[90svh] relative">

            <img
                src="/img/hero-bg.jpg"
                class="select-none absolute size-full object-cover"
                alt=""
            />

            <div
                class="absolute size-full right-0 w-full"
            >
                <img
                    src="/img/hero-bg.jpg"
                    class="overlay-image select-none absolute object-cover size-full hue-rotate-200 brightness-35"
                    alt=""
                />
                <div
                    :style="{
                        left: `${clipPathPercent}%`
                    }"
                    ref="draggableEl"
                    class="select-none w-2 h-full bg-white absolute left-0 flex items-center justify-center"
                >
                    <div
                        class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-white size-11 flex items-center justify-center"
                    >
                        <Icon name="ci:arrows" size="24" class="**:stroke-black" />
                    </div>
                </div>
            </div>

            <div class="absolute bottom-0 p-10 w-full flex justify-between items-end bg-linear-to-t from-black/55 to-transparent">
                <div class="flex flex-col gap-2 text-white">
                    <span class="typo-p-md">رنگ محصول</span>
                    <span class="typo-h-3">نارنجی</span>
                </div>
                <div class="flex flex-col justify-start gap-2 text-white">
                    <span class="typo-p-md">رنگ محصول</span>
                    <span class="typo-h-3">سفید</span>
                </div>
            </div>

        </div>
    </div>
</template>

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