<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref, computed,defineComponent, reactive, watch } from 'vue'
import { motion, MotionValue, useMotionValue, useSpring } from 'motion-v'

const active = ref({ row: 0, col: 0 })
const x = useMotionValue(0)
const y = useMotionValue(0)

const grid = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14, 15],
]
const size = 60
const gap = 10

const distance = (pointA, pointB) => {
  const xDiff = pointB.x - pointA.x
  const yDiff = pointB.y - pointA.y
  return Math.sqrt(xDiff * xDiff + yDiff * yDiff)
}

const setActive = (newActive) => {
  active.value = newActive
}

const Ball = defineComponent({
  props: {
    active: Object,
    colIndex: Number,
    rowIndex: Number,
    x: Object,
    y: Object
  },
  setup(props, { emit }) {
    const isDragging = computed(() => 
      props.colIndex === props.active?.col && props.rowIndex === props.active?.row
    )
    
    const diagonalIndex = computed(() => 
      (360 / 6) * (props.colIndex! + props.rowIndex!)
    )
    
    const d = computed(() => 
      distance(
        { x: props.active?.col, y: props.active?.row },
        { x: props.colIndex, y: props.rowIndex }
      )
    )
    watch(d, (newVal) => {
      springConfig.stiffness = Math.max(700 - newVal * 120, 0)
      springConfig.damping = 20 + newVal * 5
    })
    
    const springConfig = reactive({
      stiffness: Math.max(700 - d.value * 120, 0),
      damping: 20 + d.value * 5,
    })
    
    const dx = useSpring(props.x as MotionValue<number>, springConfig)
    const dy = useSpring(props.y as MotionValue<number>, springConfig)
    
    const handleDragStart = () => {
      setActive({ row: props.rowIndex, col: props.colIndex })
    }
    
    return ()=>{
      return (
        <motion.div
          drag
          dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
          dragTransition={{ bounceStiffness: 500, bounceDamping: 20 }}
          dragElastic={1}
          onDragStart={handleDragStart}
          style={{
            background: `hsla(calc(var(--base-hue) + ${diagonalIndex.value}), 80%, 60%, 1)`,
            width: `${size}px`,
            height: `${size}px`,
            top: props.rowIndex! * (size + gap) + 'px',
            left: props.colIndex! * (size + gap) + 'px',
            position: "absolute",
            borderRadius: "50%",
            x: isDragging.value ? x : dx,
            y: isDragging.value ? y : dy,
            zIndex: isDragging.value ? 1 : 0,
          }}
        />
      )
    }
  }

})
</script>

<template>
  <div class="app">
    <motion.div
      :animate="{ '--base-hue': 360 }"
      :initial="{ '--base-hue': 0 }"
      :transition="{ duration: 10, repeat: Infinity, ease: 'linear' }"
    >
      <motion.div
        :style="{
          display: 'flex',
          width: `${(size + gap) * 4 - gap}px`,
          height: `${(size + gap) * 4 - gap}px`,
          position: 'relative',
          perspective: '500px'
        }"
      >
      <template
        v-for="(row, rowIndex) in grid"
        :key="rowIndex"
      >
        <Ball
          v-for="(col, colIndex) in row"
          :key="`${rowIndex}-${colIndex}`"
          :active="active"
          :col-index="colIndex"
          :row-index="rowIndex"
          :x="x"
          :y="y"
        />
      </template>
      </motion.div>
    </motion.div>
  </div>
</template>

<style>
body {
  overflow: hidden;
}

.app {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>