import type { Texture } from "../engine/render/Texture"
import crateUrl from "../assets/crate.png"
import floorUrl from "../assets/floor.png"
import npcUrl from "../assets/npc.png"
import wallUrl from "../assets/wall.png"

export type Textures = {
  floor: Texture
  wall: Texture
  crate: Texture
  npc: Texture
}

/** Load every game texture up front. Call once before starting the loop. */
export async function loadTextures(): Promise<Textures> {
  const [floor, wall, crate, npc] = await Promise.all([
    loadTexture(floorUrl),
    loadTexture(wallUrl),
    loadTexture(crateUrl),
    loadTexture(npcUrl),
  ])
  return { floor, wall, crate, npc }
}

function loadTexture(url: string): Promise<Texture> {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.addEventListener("load", () => resolve(toTexture(image)))
    image.addEventListener("error", () => reject(new Error(`failed to load ${url}`)))
    image.src = url
  })
}

/** Draw a loaded image into a canvas and read its pixels back as a Texture.
 *  ImageData bytes are RGBA, identical to how Color packs a Uint32, so the
 *  buffer is reused directly with no per-pixel conversion. */
function toTexture(image: HTMLImageElement): Texture {
  const canvas = document.createElement("canvas")
  canvas.width = image.naturalWidth
  canvas.height = image.naturalHeight
  const ctx = canvas.getContext("2d")!
  ctx.drawImage(image, 0, 0)
  const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height)
  return { width: pixels.width, height: pixels.height, data: new Uint32Array(pixels.data.buffer) }
}