<script setup lang="ts">
import {frame} from "motion-v";
import GraphNode from "~/components/GraphNode.vue";


const spring = {damping: 5, stiffness: 50, restDelta: 0.001}

const elementRef = useTemplateRef('elementRef')
const xPoint = useMotionValue(0)
const yPoint = useMotionValue(0)
const x = useSpring(xPoint, spring)
const y = useSpring(yPoint, spring)

const handlePointerMove = ({clientX, clientY}: { clientX: number; clientY: number }) => {
    const element = elementRef.value?.$el
    if (!element) return

    frame.read(() => {
        xPoint.set((clientX - element.offsetLeft - element.offsetWidth / 2) / 10)
        yPoint.set((clientY - element.offsetTop - element.offsetHeight / 2) / 10)
    })
}

onMounted(() => {
    window.addEventListener("pointermove", handlePointerMove)
})

onUnmounted(() => {
    window.removeEventListener("pointermove", handlePointerMove)
})


const nodes = [
    {
        name: "DevOps engineer",
        color: "bg-blue-100",
        hOffset: 'left-20',
        vOffset: 'top-20',
    },
    {
        name: "Game developer",
        color: "bg-blue-200",
        hOffset: 'right-20',
        vOffset: 'top-20',
    },
    {
        name: "Fullstack developer",
        color: "bg-blue-300",
        hOffset: 'left-20',
        vOffset: 'bottom-20',
    },
    {
        name: "Tools programmer",
        color: "bg-blue-400",
        hOffset: 'right-20',
        vOffset: 'bottom-20',
    },
]
</script>

<template>
    <div class="hero bg-base-200 min-h-screen">
        <div class="hero-content overflow-hidden bg-">
            <GraphNode ref="elementRef" :x="x" :y="y" img="/face.jpg" name="Hi, I'm Alex" />
            <ul v-for="(node, index) in nodes" :key="index">
                <li>
                    <GraphNode
                        :x="x"
                        :y="y"
                        :name="node.name"
                        :color="node.color"
                        :hOffset="node.hOffset"
                        :vOffset="node.vOffset"/>
                </li>
            </ul>
        </div>
    </div>
</template>

<style>
* {
    overflow: hidden;
}
</style>

