// Stateless canvas painter for the mascot. Single render path: slice a
// 16x16 frame from a PNG sheet and draw it bottom-anchored, horizontally
// centered, optionally flipped (for left-facing) and optionally scaled
// (chick is smaller). Egg-stage sheets are also 16x16 PNGs (from the
// Onocentaur egg pack), so no special-case vector path is needed.
//
// The renderer is generic over the SPRITES registry — adding a new
// sheet to sprites.ts requires no change here.

import type { AnimDef, MascotStage } from './types'
import { getImage } from './sprites'

/**
 * Logical canvas size (CSS px) the mascot is drawn onto. The sprite's
 * feet land on the bottom row; the extra height above it (20x28, not
 * 20x20) leaves a little headroom before the name label/reaction bubble
 * (both real HTML elements floating above the canvas — see Mascot.svelte's
 * template) start overlapping the sprite itself.
 */
export const CANVAS_W = 20
export const CANVAS_H = 28
/** Source frame size for the bundled sheets (px). */
const FRAME = 16

export interface DrawOpts {
  /** Render scale; usually STAGE_SCALE[stage]. */
  scale: number
  /** Horizontal facing — when -1, draw the sheet mirrored. */
  facing: 1 | -1
  /** Wiggle phase (radians) for the egg wobble; ignored for chicken stages. 0 disables. */
  wiggle: number
}

/** Draw one animation frame into the given 2D context (which is already sized CANVAS_W x CANVAS_H in CSS px). */
export function drawFrame(
  ctx: CanvasRenderingContext2D,
  _stage: MascotStage,
  anim: AnimDef,
  frameIdx: number,
  opts: DrawOpts
): void {
  ctx.clearRect(0, 0, CANVAS_W, CANVAS_H)
  const img = anim.src ? getImage(anim.src) : null
  if (!img) return // not yet loaded — skip; the loop picks it up next tick
  const idx = Math.max(0, Math.min(frameIdx, anim.frames - 1))
  const sx = idx * FRAME
  const scale = opts.scale
  const drawW = FRAME * scale
  const drawH = FRAME * scale
  // Bottom-anchor the 16x16 frame in the 20x20 canvas, then scale.
  const dx = (CANVAS_W - drawW) / 2 + Math.sin(opts.wiggle) * 1.2
  const dy = CANVAS_H - drawH
  ctx.save()
  if (opts.facing === -1) {
    ctx.translate(CANVAS_W, 0)
    ctx.scale(-1, 1)
  }
  ctx.imageSmoothingEnabled = false
  ctx.drawImage(img, sx, 0, FRAME, FRAME, dx, dy, drawW, drawH)
  ctx.restore()
}
