Spring Drag Release

import { css, on, ref, type Handle } from 'remix/component'

import { dragVelocityEvents } from './drag-release.ts'
import { spring, type SpringPreset } from '@remix-run/ui/animation'

interface TrailPoint {
  x: number
  y: number
  time: number
}

function PointerTrail(handle: Handle) {
  let canvas: HTMLCanvasElement
  let points: TrailPoint[] = []
  let isDown = false
  let releaseTime = 0
  let animationId: number | null = null

  let maxAge = 150 // ms - how long points stay in the trail while dragging
  let fadeDuration = 800 // ms - how long the trail fades after release

  function draw() {
    if (!canvas) return
    let ctx = canvas.getContext('2d')
    if (!ctx) return

    let now = performance.now()
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // Calculate overall opacity based on release time
    let overallOpacity = 1
    if (!isDown && releaseTime > 0) {
      let elapsed = now - releaseTime
      overallOpacity = Math.max(0, 1 - elapsed / fadeDuration)
      if (overallOpacity <= 0) {
        points = []
        animationId = null
        return
      }
    }

    // Filter out old points while dragging
    if (isDown) {
      points = points.filter((p) => now - p.time < maxAge)
    }

    if (points.length < 2) {
      if (isDown || overallOpacity > 0) {
        animationId = requestAnimationFrame(draw)
      } else {
        animationId = null
      }
      return
    }

    // Draw the trail as a tapered path
    ctx.beginPath()
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'

    for (let i = 1; i < points.length; i++) {
      let prev = points[i - 1]
      let curr = points[i]

      // Age-based opacity (older = more transparent)
      let age = isDown ? (now - prev.time) / maxAge : 0
      let segmentOpacity = (1 - age) * overallOpacity

      // Thickness tapers from thin (old) to thick (new)
      let progress = i / (points.length - 1)
      let thickness = 2 + progress * 8

      ctx.beginPath()
      ctx.moveTo(prev.x, prev.y)
      ctx.lineTo(curr.x, curr.y)
      ctx.strokeStyle = `rgba(14, 165, 233, ${segmentOpacity * 0.6})`
      ctx.lineWidth = thickness
      ctx.stroke()
    }

    // Draw a red glow at the end to show direction
    if (points.length > 0) {
      let last = points[points.length - 1]
      let gradient = ctx.createRadialGradient(
        last.x,
        last.y,
        0,
        last.x,
        last.y,
        20,
      )
      gradient.addColorStop(0, `rgba(239, 68, 68, ${overallOpacity * 0.6})`)
      gradient.addColorStop(1, 'rgba(239, 68, 68, 0)')
      ctx.fillStyle = gradient
      ctx.beginPath()
      ctx.arc(last.x, last.y, 20, 0, Math.PI * 2)
      ctx.fill()
    }

    animationId = requestAnimationFrame(draw)
  }

  function startDrawing() {
    if (!animationId) {
      animationId = requestAnimationFrame(draw)
    }
  }

  let onPointerDown = (event: PointerEvent) => {
    if (
      !(event.target instanceof Element) ||
      !event.target.closest('.draggable')
    )
      return
    isDown = true
    releaseTime = 0
    points = [{ ...localPoint(canvas, event), time: performance.now() }]
    startDrawing()
  }

  let onPointerMove = (event: PointerEvent) => {
    if (!isDown) return
    points.push({ ...localPoint(canvas, event), time: performance.now() })
  }

  let onPointerUp = () => {
    if (!isDown) return
    isDown = false
    releaseTime = performance.now()
  }

  let onPointerCancel = () => {
    isDown = false
    releaseTime = performance.now()
  }

  return () => (
    <canvas
      mix={[
        ref((node, signal) => {
          canvas = node
          let root = canvas.parentElement
          if (!root) return

          canvas.width = root.clientWidth
          canvas.height = root.clientHeight
          root.addEventListener('pointerdown', onPointerDown, { signal })
          root.addEventListener('pointermove', onPointerMove, { signal })
          root.addEventListener('pointerup', onPointerUp, { signal })
          root.addEventListener('pointercancel', onPointerCancel, { signal })
        }),
        css({
          position: 'absolute',
          inset: 0,
          pointerEvents: 'none',
          zIndex: 5,
        }),
      ]}
    />
  )
}

export default function SpringDemo(handle: Handle) {
  let root: HTMLElement

  // Target circle position (click to move), relative to the demo
  let targetX = 0
  let targetY = 0

  // Draggable circle state
  let dragX = 0
  let dragY = 0
  let isDragging = false
  let isAnimating = false

  // Current spring transitions (separate for X and Y to capture 2D velocity)
  let transitionX = ''
  let transitionY = ''

  let selectedPreset: SpringPreset = 'bouncy'

  // Get default spring transition for target circle
  let springValue = spring(selectedPreset)

  return () => (
    <div
      mix={[
        ref((node) => {
          root = node
          targetX = node.clientWidth / 2
          targetY = node.clientHeight / 2
          dragX = targetX - 150
          dragY = targetY
          handle.update()
        }),
        css({
          position: 'relative',
          width: '100%',
          height: '480px',
          backgroundColor: '#1a1a2e',
          cursor: 'crosshair',
          overflow: 'hidden',
        }),
        on('click', (event) => {
          if (!(event.target instanceof Element)) return
          if (event.target.closest('.controls, .draggable')) return

          let point = localPoint(root, event)
          targetX = point.x
          targetY = point.y
          handle.update()
        }),
      ]}
    >
      {/* Pointer trail */}
      <PointerTrail />

      {/* Target circle */}
      <div
        mix={[
          css({
            position: 'absolute',
            width: '80px',
            height: '80px',
            borderRadius: '50%',
            backgroundColor: 'transparent',
            border: '3px dashed rgba(233, 69, 96, 0.5)',
            transform: 'translate(-50%, -50%)',
            pointerEvents: 'none',
          }),
        ]}
        style={{
          left: `${targetX}px`,
          top: `${targetY}px`,
          transition: `left ${springValue}, top ${springValue}`,
        }}
      />

      {/* Draggable circle */}
      <div
        class="draggable"
        mix={[
          css({
            position: 'absolute',
            width: '60px',
            height: '60px',
            borderRadius: '50%',
            backgroundColor: '#0ea5e9',
            boxShadow: '0 0 20px rgba(14, 165, 233, 0.5)',
            transform: 'translate(-50%, -50%)',
            userSelect: 'none',
            touchAction: 'none',
            zIndex: 10,
          }),
          on('transitionend', () => {
            isAnimating = false
            handle.update()
          }),
          on('pointerdown', (event) => {
            event.preventDefault()
            isDragging = true
            isAnimating = false
            handle.update()
          }),
          on('pointermove', (event) => {
            if (!isDragging) return
            let point = localPoint(root, event)
            dragX = point.x
            dragY = point.y
            handle.update()
          }),
          dragVelocityEvents(),
          on(dragVelocityEvents.release, (event) => {
            isDragging = false

            // Calculate distance to target on each axis
            let distX = targetX - dragX
            let distY = targetY - dragY

            if (Math.abs(distX) < 1 && Math.abs(distY) < 1) {
              handle.update()
              return
            }

            // Create separate springs for X and Y with their own normalized velocities
            // normalizedVelocity = velocity / distance (with sign!) for each axis
            // The sign matters: positive = moving toward target, negative = moving away
            if (Math.abs(distX) >= 1) {
              let normalizedVelocityX = event.velocityX / distX
              normalizedVelocityX = Math.max(
                -20,
                Math.min(20, normalizedVelocityX),
              )
              transitionX = String(
                spring(selectedPreset, { velocity: normalizedVelocityX }),
              )
            } else {
              transitionX = String(spring(selectedPreset))
            }

            if (Math.abs(distY) >= 1) {
              let normalizedVelocityY = event.velocityY / distY
              normalizedVelocityY = Math.max(
                -20,
                Math.min(20, normalizedVelocityY),
              )
              transitionY = String(
                spring(selectedPreset, { velocity: normalizedVelocityY }),
              )
            } else {
              transitionY = String(spring(selectedPreset))
            }

            // Animate to target
            isAnimating = true
            dragX = targetX
            dragY = targetY
            handle.update()
          }),
        ]}
        style={{
          left: `${dragX}px`,
          top: `${dragY}px`,
          cursor: isDragging ? 'grabbing' : 'grab',
          transition: isAnimating
            ? `left ${transitionX}, top ${transitionY}`
            : 'none',
        }}
      />

      {/* Controls */}
      <div
        class="controls"
        mix={[
          css({
            position: 'absolute',
            top: '20px',
            left: '50%',
            transform: 'translateX(-50%)',
            display: 'flex',
            gap: '4px',
            padding: '4px',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            borderRadius: '8px',
            fontFamily: 'system-ui, sans-serif',
            fontSize: '14px',
            cursor: 'default',
          }),
        ]}
      >
        {(Object.keys(spring.presets) as SpringPreset[]).map((preset) => (
          <label
            key={preset}
            mix={[
              css({
                display: 'flex',
                alignItems: 'center',
                gap: '6px',
                padding: '8px 12px',
                borderRadius: '6px',
                color: '#fff',
                cursor: 'pointer',
                transition: 'background-color 150ms ease',
                '&:hover': {
                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
                },
                '&:has(input:checked)': {
                  backgroundColor: 'rgba(14, 165, 233, 0.3)',
                },
              }),
            ]}
          >
            <input
              type="radio"
              name="spring-preset"
              value={preset}
              checked={selectedPreset === preset}
              mix={[
                css({ accentColor: '#0ea5e9' }),
                on('change', () => {
                  selectedPreset = preset
                  springValue = spring(selectedPreset)
                  handle.update()
                }),
              ]}
            />
            {preset}
          </label>
        ))}
      </div>

      {/* Instructions */}
      <div
        mix={[
          css({
            position: 'absolute',
            bottom: '20px',
            left: '50%',
            transform: 'translateX(-50%)',
            color: '#ffffff80',
            fontFamily: 'system-ui, sans-serif',
            fontSize: '14px',
            textAlign: 'center',
          }),
        ]}
      >
        Click to move target • Drag the blue circle and release to see
        velocity-based spring
      </div>
    </div>
  )
}

function localPoint(element: Element, event: MouseEvent) {
  let rect = element.getBoundingClientRect()
  return { x: event.clientX - rect.left, y: event.clientY - rect.top }
}