import { createCanvas, Image } from "@gfx/canvas";

function loadImage(src: string): Promise<Image> {
  return new Promise((resolve, reject) => {
    if (!src.startsWith("data:image/png;base64,")) {
      console.log("src", src);
    }
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => {
      console.log(src);
      reject();
    };
    img.src = src;
  });
}

export async function createIsometricCube(
  face1Src: string,
  face2Src: string,
  face3Src: string,
  width: number = 96,
) {
  const canvasWidth = width; // Set a size for the canvas
  const canvasHeight = Math.ceil(width / .866);
  const canvas = createCanvas(canvasWidth, canvasHeight);
  const ctx = canvas.getContext("2d");

  try {
    const [face1, face2, face3] = await Promise.all([
      loadImage(face1Src),
      loadImage(face2Src),
      loadImage(face3Src),
    ]).catch();

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    ctx.setTransform(
      1,
      0,
      Math.tan(degToRad(30)),
      1,
      0,
      canvasWidth / 3.5,
    );
    ctx.drawImage(face1, 0, 0, canvasWidth / 2, canvasHeight / 2);

    // Face 2
    ctx.setTransform(
      1,
      0,
      -Math.tan(degToRad(30)),
      1,
      canvasWidth / 2,
      canvasHeight / 2,
    );
    ctx.drawImage(face2, 0, 0, canvasWidth / 2, canvasHeight / 2);

    // Face 3
    ctx.setTransform(
      1,
      -Math.tan(degToRad(60)),
      Math.tan(degToRad(30)),
      1,
      canvasWidth / 2,
      0,
    );
    ctx.drawImage(face3, 0, 0, canvasWidth / 2, canvasWidth / 3.5);

    ctx.setTransform(1, 0, 0, 1, 0, 0);
  } catch (e) {
    // console.log("error", e);
  }

  const b64 = canvas.toDataURL("png");
  return b64;
}

function degToRad(deg: number) {
  return deg * (Math.PI / 180);
}