import { Animator, AtlasMeta } from '@/atlas-pack';
import { assertNonNull } from '@/oidlib';
import atlasJSON from './atlas.json' assert { type: 'json' };
import { FilmID } from './film-id.ts';

interface Demo {
  readonly window: Window;
  readonly canvas: HTMLCanvasElement;
  readonly context: CanvasRenderingContext2D;
  readonly animator: Animator;
  readonly atlas: HTMLImageElement;
  readonly atlasMeta: AtlasMeta<FilmID>;
}

async function main(window: Window): Promise<void> {
  console.log(
    `
atlas-pack ┌>°┐
        by │  │idoid
           └──┘
    `.trim(),
  );

  const canvas = window.document.getElementsByTagName('canvas').item(0);
  assertNonNull(canvas, 'Canvas missing.');

  const context = canvas.getContext('2d');
  assertNonNull(context, 'Context missing.');

  // Use nearest neighbor scaling.
  context.imageSmoothingEnabled = false;

  const atlas = await loadImage('atlas.png');
  const atlasMeta = atlasJSON as unknown as AtlasMeta<FilmID>;
  const film = atlasMeta.filmByID.BackpackerWalkRight;
  const demo = {
    window,
    canvas,
    context,
    animator: new Animator(film),
    atlas,
    atlasMeta,
  };
  window.requestAnimationFrame((now) => loop(demo, now, now));
}

function loop(demo: Demo, _then: number, now: number): void {
  demo.context.clearRect(0, 0, demo.canvas.width, demo.canvas.height);

  const scale = 16;
  const { bounds } = demo.animator.cel(now);
  const atlasSource = [bounds.x, bounds.y, bounds.w, bounds.h] as const;
  const canvasDestination = [0, 0, bounds.w * scale, bounds.h * scale] as const;
  demo.context.drawImage(demo.atlas, ...atlasSource, ...canvasDestination);

  demo.window.requestAnimationFrame((then) => loop(demo, now, then));
}

function loadImage(uri: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(image);
    image.src = uri;
  });
}

await main(window);