import botonJugarImg from "./assets/boton_jugar.png";
import flechaImg from "./assets/flecha.png";
import larretaImg from "./assets/Larreta.png";
import millonarioMaloPng from "./assets/Millonario Malo.png";
import cieloRioCalleImg from "./assets/CieloRioCalle.png";
import cieloImg from "./assets/Cielo.png";
import rioImg from "./assets/Rio.png";
import parquePublicoRioImg from "./assets/Parque publico con rio.png";
import parquePublicoImg from "./assets/Parque publico.png";
import edificiosImg from "./assets/Edificios.png";
import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png";
import baldosaImg from "./assets/Baldosa.png";
import semillaImg from "./assets/Semilla.png";
import arbol1Img from "./assets/Árbol 1.png";
import arbol2Img from "./assets/Árbol 2.png";
import ciudadanx1Img from "./assets/Firma 1.png";
import ciudadanx2Img from "./assets/Firma 2.png";
import ciudadanx3Img from "./assets/Firma 3.png";

function loadImage(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (e) => reject(e);
    img.src = url;
  });
}

export const assetUrls = {
  botonJugar: botonJugarImg,
  flecha: flechaImg,
  larreta: larretaImg,
  millonarioMalo: millonarioMaloPng,
  cieloRioCalle: cieloRioCalleImg,
  cielo: cieloImg,
  rio: rioImg,
  parquePublicoRio: parquePublicoRioImg,
  parquePublico: parquePublicoImg,
  edificios: edificiosImg,
  jugadorx: jugadorxImg,
  baldosa: baldosaImg,
  semilla: semillaImg,
  arbol1: arbol1Img,
  arbol2: arbol2Img,
  ciudadanx1: ciudadanx1Img,
  ciudadanx2: ciudadanx2Img,
  ciudadanx3: ciudadanx3Img,
};
export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement };

const assets = Object.fromEntries(
  Object.entries(assetUrls).map(([name, url]) => [name, loadImage(url)])
);

export async function loadAssets() {
  const imgs = await Promise.all(Object.values(assets));
  return Object.fromEntries(
    imgs.map((img, i) => [Object.keys(assetUrls)[i], img])
  ) as Assets;
}