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

const props = defineProps({
  baseDelay: {
    type: Number,
    default: 0.0015
  },
  noise: {
    type: Number,
    default: 0.1
  }
})

const gridSize = 10
const totalCells = gridSize * gridSize
const grid = useDomRef()
const originIndex = ref<number | null>(null)
const calculatedDelay = ref<number[]>([])

onMounted(() => {
  const randomOrigin = Math.floor(Math.random() * totalCells)
  const cells = grid.value?.querySelectorAll(".cell")

  if (!cells) return

  const originCell = cells[randomOrigin]

  const originPoint = getCenter(originCell as HTMLElement)
  const delays: number[] = []

  for (let i = 0; i < totalCells; i++) {
    const cell = cells[i]
    const cellPoint = getCenter(cell as HTMLElement)
    const distance = Math.sqrt(
      (cellPoint.x - originPoint.x) ** 2 +
      (cellPoint.y - originPoint.y) ** 2
    )
    const delay = distance * props.baseDelay + Math.random() * props.noise
    delays.push(delay)
  }

  calculatedDelay.value = delays
  originIndex.value = randomOrigin
})

const variants = {
  hidden: { opacity: 0, scale: 0.5 },
  visible: { opacity: 1, scale: 1 },
}

/**
 * ==============   Utils   ================
 */
function getCenter(element: HTMLElement) {
  const { x, y, width, height } = element.getBoundingClientRect()
  return { x: x + width / 2, y: y + height / 2 }
}

const cells = computed(() => {
  return Array.from({ length: totalCells }, (_, index) => index)
})
</script>

<template>
  <div class="grid-container">
    <motion.div
      ref="grid"
      class="grid"
      :initial="'hidden'"
      :animate="originIndex !== null ? 'visible' : 'hidden'"
    >
      <motion.div
        v-for="index in cells"
        :key="index"
        :class="['cell', index === originIndex ? 'origin' : '']"
        :variants="variants"
        :transition="{
          type: 'spring',
          stiffness: 600,
          damping: 20,
          delay: index === originIndex ? 0 : calculatedDelay[index]
        }"
      />
    </motion.div>
  </div>
</template>

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

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 10px;
  width: 400px;
  height: 400px;
}

.cell {
  background-color: rgba(255,255,255,0.2);
  border-radius: 4px;
}

.origin {
  background-color: #ff0088;
}
</style>