"use client"

import { motion, MotionValue, useMotionValue, useTransform } from "motion/react"

export default function AppleWatchHomeScreen() {
    /**
     * 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)

    return (
        <div className="device">
            <motion.div
                drag
                dragConstraints={{
                    left: -650,
                    right: 50,
                    top: -600,
                    bottom: 50,
                }}
                style={{
                    width: 1000,
                    height: 1000,
                    x,
                    y,
                    background: "transparent",
                    willChange: "transform",
                }}
            >
                {grid.map((rows, rowIndex) =>
                    rows.map((colIndex: number) => (
                        <Item
                            key={`${rowIndex}-${colIndex}`}
                            row={rowIndex}
                            col={colIndex}
                            planeX={x}
                            planeY={y}
                        />
                    ))
                )}
            </motion.div>
            <Stylesheet />
        </div>
    )
}

function Item({ row, col, planeX, planeY }: ItemProps) {
    const xOffset =
        col * (icon.size + icon.margin) +
        (row % 2) * ((icon.size + icon.margin) / 2)
    const yOffset = row * icon.size

    const screenOffsetX = useTransform(() => planeX.get() + xOffset + 20)
    const screenOffsetY = useTransform(() => 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,
                top: yOffset,
                x,
                y,
                scale,
                width: icon.size,
                height: icon.size,
                borderRadius: "50%",
                contain: "strict",
                willChange: "transform",
                background: "white",
                opacity: 0.9,
            }}
        />
    )
}

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

interface ItemProps {
    row: number
    col: number
    planeX: MotionValue<number>
    planeY: MotionValue<number>
}

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

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

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

// Transform mapping functions
const createScreenRange = (axis: keyof typeof device) => [
    -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")

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        .device {
          width: ${device.width}px;
          height: ${device.height}px;
          background-color: var(--layer);
          border: 1px solid var(--border);
          border-radius: 80px;
          overflow: hidden;
          position: relative;
          touch-action: none;
          user-select: none;
        }
      `}
        </style>
    )
}