<script setup lang="ts">
import {
    animate,
    clamp,
    motion,
    useDomRef,
    useMotionValue,
    useTransform,
} from "motion-v"
import { computed, onMounted, ref } from "vue"

const props = defineProps({
    src: {
        type: String,
        default: "/photos/japan-day/7.jpg",
    },
    step: {
        type: Number,
        default: 50,
    },
})

const containerRef = useDomRef()
const x = useMotionValue(0)
const boundary = ref(300)

// Make the input range reactive with computed to update when boundary changes
const inputRange = computed(() => [-boundary.value, boundary.value])

const clipPath = useTransform(x, inputRange as any, [
    "inset(0% 0% 0% 0%)",
    "inset(0% 0% 0% 100%)",
])

const lineBackgroundColor = useSliderColor(x, boundary)

onMounted(() => {
    if (containerRef.value) {
        boundary.value = containerRef.value.clientWidth / 2
    }
})

const keyboard = useKeyboard(x, boundary, props.step)

/**
 * ==============   Utils   ================
 */

function useSliderColor(x, boundary) {
    return useTransform(
        x,
        computed(() => [
            -boundary.value + 20,
            -boundary.value + 60,
            boundary.value - 60,
            boundary.value - 20,
        ]) as any,
        [
            "rgba(255, 255, 255, 0)",
            "rgba(255, 255, 255, 1)",
            "rgba(255, 255, 255, 1)",
            "rgba(255, 255, 255, 0)",
        ]
    )
}

function useKeyboard(x, boundary, step) {
    const handleKeyDown = (event) => {
        let moveBy = 0

        if (event.key === "ArrowLeft") {
            moveBy = -step
        } else if (event.key === "ArrowRight") {
            moveBy = step
        } else {
            return
        }

        animate(x, clamp(-boundary.value, boundary.value, x.get() + moveBy), {
            type: "spring",
            stiffness: 900,
            damping: 40,
            velocity: moveBy * 10,
        })
    }

    const start = () => {
        document.addEventListener("keydown", handleKeyDown)
    }

    const stop = () => {
        document.removeEventListener("keydown", handleKeyDown)
    }

    return { start, stop }
}
</script>

<template>
    <div ref="containerRef" class="container">
        <div class="image-container">
            <motion.img :src="src" alt="Kirby photo" class="image" />
            <motion.img
                :style="{ clipPath }"
                :src="src"
                alt="Kirby photo in black and white"
                class="image overlay"
            />
        </div>

        <motion.div
            class="slider"
            drag="x"
            :drag-elastic="0.05"
            :drag-constraints="containerRef"
            :style="{ x, backgroundColor: lineBackgroundColor }"
            tabindex="0"
            @focus="keyboard.start"
            @blur="keyboard.stop"
        >
            <div class="handle">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path d="m18 8 4 4-4 4" />
                    <path d="m6 8-4 4 4 4" />
                    <path d="M8 12h.01" />
                    <path d="M12 12h.01" />
                    <path d="M16 12h.01" />
                </svg>
            </div>
        </motion.div>
    </div>
</template>

<style>
body {
    overflow: hidden;
}

.container {
    position: relative;
}

.image-container {
    position: relative;
    background-color: #0b1011;
    border: 1px solid #1d2628;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    height: 300px;
}

@media (max-width: 500px) {
    .image-container {
        height: 200px;
    }
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    top: 0;
    left: 0;
    filter: grayscale(100%);
}

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: white;
    cursor: grab;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.4));
}

.handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f1115;
    cursor: grab;
    touch-action: none;
}

.slider:focus-visible {
    outline: none;
}

.slider:focus-visible .handle {
    outline: 4px solid #ff0088;
    outline-offset: 2px;
}

.handle:active {
    cursor: grabbing;
}
</style>