<script setup lang="tsx">
/** @jsxImportSource vue */
import { Cursor, usePointerPosition } from "motion-plus-vue"
import {
    clamp,
    useSpring,
    useTransform,
    useVelocity,
    motion,
} from "motion-v"
import { defineComponent, ref } from "vue"

function usePointerToSkew(axisMotionValue) {
    const velocity = useVelocity(axisMotionValue)
    const maxVelocity = useTransform(() => clamp(-1000, 1000, velocity.get()))
    const smoothVelocity = useSpring(maxVelocity, {
        damping: 10,
        stiffness: 200,
    })
    return useTransform(smoothVelocity, [0, 100], [0, -1], {
        clamp: false,
    })
}

const enterTransition = {
    duration: 0.5,
    ease: [0, 0.54, 0.37, 0.97],
}

const exitTransition = {
    duration: 0.2,
    ease: "easeIn",
}

const position = usePointerPosition()
const skewX = usePointerToSkew(position.x)
const skewY = usePointerToSkew(position.y)

const items = [
    { label: 'Tokyo', number: 1, image: '/photos/japan-bw/2.jpg' },
    { label: 'Amsterdam', number: 2, image: '/photos/amsterdam-cityscape/1.jpg' },
    { label: 'London', number: 3, image: '/photos/cityscape/2.jpg' }
]

const Item = defineComponent({
    props: {
        item: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        const isHovered = ref(false)
        
        return () => (
            <motion.li
                class="item"
                style={{
                    justifyContent: isHovered.value ? 'flex-end' : 'flex-start'
                }}
                onHoverStart={() => isHovered.value = true}
                onHoverEnd={() => isHovered.value = false}
            >
                <motion.span layout class="text">
                    <span class="number-label">0{props.item.number}</span>
                    {props.item.label}
                </motion.span>
                <motion.span layout class="text" aria-hidden>
                    <span class="number-label">0{props.item.number}</span>
                    {props.item.label}
                </motion.span>
                <Cursor
                        show={isHovered.value}
                        follow
                        offset={{ x: 30, y: 30 }}
                        variants={{
                            default: {
                                clipPath: 'inset(0% 0% 0% 0%)',
                                transition: enterTransition
                            },
                            exit: {
                                clipPath: 'inset(50% 50% 50% 50%)',
                                transition: exitTransition
                            }
                        }}
                        style={{ skewX, skewY, originX: 0, originY: 0 }}
                    >
                        <motion.div
                            variants={{
                                default: {
                                    scale: 1,
                                    transition: enterTransition
                                },
                                exit: {
                                    scale: 1.5,
                                    transition: exitTransition
                                }
                            }}
                            class="image-container"
                        >
                            <img
                                src={props.item.image}
                                width={300}
                                height={400}
                                alt={`Photo of ${props.item.label}`}
                            />
                        </motion.div>
                    </Cursor>
            </motion.li>
        )
    }
})
</script>

<template>
    <ul class="list">
        <Item
            v-for="(item, i) in items"
            :key="i"
            :item="item"
            :index="i"
        />
    </ul>
</template>

<style>
.list {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

.item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 48px;
}

.text {
    color: #f5f5f5;
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 48px;
}

.number-label {
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}

.image-container {
    width: 300px;
    height: 400px;
}
</style>