<script setup lang="tsx">
/** @jsxImportSource vue */
import { defineComponent } from 'vue'
import { motion, useMotionValue, useTransform } from 'motion-v'

/**
 * Arbitrary starting position to center an icon.
 * A more sophisticated implementation could use measurements
 * and calculations to decide which is the center or most
 * important icon.
 */
const x = useMotionValue(-225)
const y = useMotionValue(-225)

// Fill a grid of numbers to represent each app icon
const grid = new Array(10).fill([0, 1, 2, 3, 4, 5, 6, 7])

/**
 * ==============   Settings   ================
 */
const icon = {
  margin: 20,
  size: 100,
}

const device = {
  width: 368,
  height: 448,
}

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

// Transform mapping functions
const createScreenRange = (axis) => [
  -60,
  80,
  device[axis] - (icon.size + icon.margin) / 2 - 80,
  device[axis] - (icon.size + icon.margin) / 2 + 60,
]

const scaleRange = [0, 1, 1, 0]
const translateRange = [50, 0, 0, -50]
const xRange = createScreenRange("width")
const yRange = createScreenRange("height")

// Item component
const Item = defineComponent({
  props: {
    row: Number,
    col: Number,
    planeX: Object,
    planeY: Object
  },
  setup(props) {
    const xOffset = 
      props.col!  * (icon.size + icon.margin) +
      (props.row! % 2) * ((icon.size + icon.margin) / 2)
    const yOffset = props.row! * icon.size

    const screenOffsetX = useTransform(() => props.planeX?.get() + xOffset + 20)
    const screenOffsetY = useTransform(() => props.planeY?.get() + yOffset + 20)
    const x = useTransform(screenOffsetX, xRange, translateRange)
    const y = useTransform(screenOffsetY, yRange, translateRange)
    const xScale = useTransform(screenOffsetX, xRange, scaleRange)
    const yScale = useTransform(screenOffsetY, yRange, scaleRange)
    const scale = useTransform(() => Math.min(xScale.get(), yScale.get()))

    return () => (
      <motion.div
        style={{
          position: 'absolute',
          left: `${xOffset}px`,
          top: `${yOffset}px`,
          x: x,
          y: y,
          scale: scale,
          width: `${icon.size}px`,
          height: `${icon.size}px`,
          borderRadius: '50%',
          contain: 'strict',
          willChange: 'transform',
          background: 'white',
          opacity: 0.9
        }}
      />
    )
  },
})
</script>

<template>
  <div class="device">
    <motion.div
      drag
      :drag-constraints="{
        left: -650,
        right: 50,
        top: -600,
        bottom: 50,
      }"
      :style="{
        width: '1000px',
        height: '1000px',
        x,
        y,
        background: 'transparent',
        willChange: 'transform',
      }"
    >
      <template v-for="(rows, rowIndex) in grid" :key="rowIndex">
        <template v-for="colIndex in rows" :key="`${rowIndex}-${colIndex}`">
          <Item
            :row="rowIndex"
            :col="colIndex"
            :plane-x="x"
            :plane-y="y"
          />
        </template>
      </template>
    </motion.div>
  </div>
</template>

<style>
.device {
  width: 368px;
  height: 448px;
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: 80px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
}
</style>