const previewUrl = "";
const imageRendering = "auto";
const renderSize = {
  width: 1000,
  height: 1000,
};

class PreviewImageData {
  constructor(name, url, position, rotation, size) {
    this.name = name;
    this.url = url;
    this.position = position;
    this.rotation = rotation;
    this.size = size;
  }
}

async function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = document.createElement("img");
    image.src = url;
    image.crossOrigin = "anonymous";
    image.onload = () => {
      resolve(image);
    };
    image.onerror = () => {
      // Some display fallbacks for when the image fails to load
      if (!image.src.startsWith("https://")) {
        image.src = "https://ordinals.com" + url;
      } else if (image.src.startsWith("https://ordinals.com")) {
        image.src = "https://ord-mirror.magiceden.dev" + url;
      }
    };
  });
}

//check Attribute Existed
function CheckExisted(category, attribute) {
  if (!category) {
    return false;
  }
  const sheet = category.getAttribute(attribute);
  if (sheet != null) {
    return true;
  }
  return false;
}

//check Attribute if is true or false
function CheckBool(category, attribute) {
  if (!category) {
    return false;
  }
  const sheet = category.getAttribute(attribute);
  if (sheet != null) {
    if (JSON.parse(sheet)) {
      return true;
    }
    return false;
  }
  return false;
}

function renderImageWithTranslate(
  canvasContext,
  canvas,
  image,
  position = [0.5, 0.5],
  scale = [1, 1],
  angle = 0
) {
  const imageAspectRatio = image.width / image.height;
  const canvasAspectRatio = canvas.width / canvas.height;

  let drawWidth, drawHeight;
  if (imageAspectRatio > canvasAspectRatio) {
    drawWidth = canvas.width;
    drawHeight = canvas.width / imageAspectRatio;
  } else {
    drawHeight = canvas.height;
    drawWidth = canvas.height * imageAspectRatio;
  }

  const scaledWidth = drawWidth * scale[0];
  const scaledHeight = drawHeight * scale[1];
  const rotationAngle = angle;
  const offsetX = canvas.width * position[0] - scaledWidth / 2;
  const offsetY = canvas.height * position[1] - scaledHeight / 2;

  canvasContext.save();
  canvasContext.translate(
    offsetX + scaledWidth / 2,
    offsetY + scaledHeight / 2
  );
  canvasContext.rotate((rotationAngle * Math.PI) / 180);
  canvasContext.drawImage(
    image,
    -scaledWidth / 2,
    -scaledHeight / 2,
    scaledWidth,
    scaledHeight
  );
  canvasContext.restore();
}

function renderSheetImage(
  altasImg,
  sheetlayout,
  canvasContext,
  canvas,
  index = 0,
  position = [0.5, 0.5],
  scale = [1, 1],
  angle = 0
) {
  const tempCanvas = document.createElement("canvas");
  const atlasCols = sheetlayout[0];
  const atlasRows = sheetlayout[1];
  const imageIndex = index;
  const imageWidth = altasImg.width / atlasCols;
  const imageHeight = altasImg.height / atlasRows;
  tempCanvas.width = imageWidth;
  tempCanvas.height = imageHeight;
  const tempCtx = tempCanvas.getContext("2d");
  const col = imageIndex % atlasCols;
  const row = Math.floor(imageIndex / atlasCols);
  tempCtx.drawImage(
    altasImg,
    col * imageWidth,
    row * imageHeight,
    imageWidth,
    imageHeight,
    0,
    0,
    imageWidth,
    imageHeight
  );
  renderImageWithTranslate(
    canvasContext,
    canvas,
    tempCanvas,
    position,
    scale,
    angle
  );
}

function renderAtlasImage(
  canvasContext,
  canvas,
  image,
  atlasrange,
  position = [0.5, 0.5],
  scale = [1, 1],
  angle = 0
) {
  const tempCanvas = document.createElement("canvas");
  tempCanvas.width = atlasrange[2];
  tempCanvas.height = atlasrange[3];
  const tempCtx = tempCanvas.getContext("2d");
  tempCtx.drawImage(
    image,
    atlasrange[0],
    image.height - atlasrange[1] - atlasrange[3],
    atlasrange[2],
    atlasrange[3],
    0,
    0,
    atlasrange[2],
    atlasrange[3]
  );
  renderImageWithTranslate(
    canvasContext,
    canvas,
    tempCanvas,
    position,
    scale,
    angle
  );
}

function GetPreviewImg(metaversepreviewElement) {
  const previewImages = [];
  getAllPreviewData(metaversepreviewElement, previewImages);
  return previewImages;
}

function getAllPreviewData(metaversepreviewElement, imagesArray) {
  var previewImgElements =
    metaversepreviewElement.querySelectorAll("previewimg");
  if (previewImgElements) {
    previewImgElements.forEach((Element, index) => {
      element_url = Element.getAttribute("src");
      element_size = Element.getAttribute("size");
      element_position = Element.getAttribute("position");
      element_rotation = Element.getAttribute("rotation");
      if (element_url) {
        num = index;
        url = element_url;
        size = [1.0, 1.0];
        position = [0.5, 0.5];
        rotation = 0;
        if (element_size) {
          size = JSON.parse(element_size);
        }
        if (element_position) {
          position = JSON.parse(element_position);
        }
        if (element_rotation) {
          rotation = JSON.parse(element_rotation);
        }
        const previewImage = new PreviewImageData(
          num,
          url,
          position,
          rotation,
          size
        );

        imagesArray.push(previewImage);
      }
    });
  }
}

async function renderImage(imageEl) {
  const canvas = document.createElement("canvas");
  const metaverse = "metaverse";
  const metaversepreview = "metaversepreview";
  const metaversedlc = "metaversedlc";
  const sheetlayout = "sheetlayout";
  const sheetindex = "sheetindex";
  canvas.width = renderSize.width;
  canvas.height = renderSize.height;

  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  const frontimg = "frontimg";
  const metaverseElement = document.querySelector(metaverse);
  const metaverseDlc = document.querySelector(metaversedlc);
  const metaversepreviewElement = document.querySelector(metaversepreview);
  var baseimgurl = null;
  var baseimg = null;

  if (metaverseElement) {
    baseimgurl = metaverseElement.getAttribute("src");
    baseimg = await loadImage(baseimgurl);
  }
  const dlcimgurl =
    "/content/9929aa1b54538e0c57a8821ed1ab131a9940c74d735d5564f16861873556005fi0";
  const dlcimg = await loadImage(dlcimgurl);

  var previewImgs = [];
  var previewimgurls = [];
  var previewimages = [];

  if (metaversepreviewElement) {
    const backgroundcolor =
      metaversepreviewElement.getAttribute("backgroundcolor");
    if (backgroundcolor) {
      document.body.style.backgroundColor = backgroundcolor;
    }
    previewImgs = GetPreviewImg(metaversepreviewElement);
    previewimgurls = previewImgs.map((image) => image.url);
    previewimages = await Promise.all(previewimgurls.map(loadImage));
  }

  if (previewImgs.length == 0 && previewimages == 0) {
    if (metaverseElement) {
      if (
        CheckBool(metaverseElement, "issheetanimate") &&
        CheckExisted(metaverseElement, sheetlayout)
      ) {
        const sheet = JSON.parse(metaverseElement.getAttribute(sheetlayout));
        renderSheetImage(baseimg, sheet, ctx, canvas);
      } else if (
        CheckBool(metaverseElement, "isatlas") &&
        CheckExisted(metaverseElement, "atlasrange")
      ) {
        const imgatlasrange = JSON.parse(
          metaverseElement.getAttribute("atlasrange")
        );
        renderAtlasImage(ctx, canvas, baseimg, imgatlasrange);
      } else {
        renderImageWithTranslate(ctx, canvas, baseimg);
      }
    } else if (metaverseDlc) {
      renderImageWithTranslate(ctx, canvas, dlcimg);
      document.body.style.backgroundColor = "55deff";
    } else {
    }
  }

  if (previewimages.length > 0) {
    var previewElements =
      metaversepreviewElement.querySelectorAll("previewimg");
    previewimages.forEach((element, index) => {
      var previewchildElement = previewElements[index];
      if (!CheckExisted(previewchildElement, "src")) {
        return;
      }
      if (
        CheckBool(previewchildElement, "issheetanimate") &&
        CheckExisted(previewchildElement, sheetlayout)
      ) {
        const sheet = JSON.parse(previewchildElement.getAttribute(sheetlayout));
        const stindex = previewchildElement.getAttribute(sheetindex);
        if (stindex) {
          const sheetindex = JSON.parse(stindex);
          renderSheetImage(
            element,
            sheet,
            ctx,
            canvas,
            stindex,
            previewImgs[index].position,
            previewImgs[index].size,
            previewImgs[index].rotation
          );
        } else {
          renderSheetImage(
            element,
            sheet,
            ctx,
            canvas,
            0,
            previewImgs[index].position,
            previewImgs[index].size,
            previewImgs[index].rotation
          );
        }
      } else if (
        CheckBool(previewchildElement, "isatlas") &&
        CheckExisted(previewchildElement, "atlasrange")
      ) {
        const imgatlasrange = JSON.parse(
          previewchildElement.getAttribute("atlasrange")
        );
        renderAtlasImage(
          ctx,
          canvas,
          element,
          imgatlasrange,
          previewImgs[index].position,
          previewImgs[index].size,
          previewImgs[index].rotation
        );
      } else {
        renderImageWithTranslate(
          ctx,
          canvas,
          element,
          previewImgs[index].position,
          previewImgs[index].size,
          previewImgs[index].rotation
        );
      }
    });
  }

  imageEl.src = canvas.toDataURL("image/png");
}

function createInitialImage() {
  document.body.style.margin = "0px";
  document.body.style.padding = "0px";
  document.body.style.backgroundColor = "ffffff";

  const img = document.createElement("img");
  img.id = "img";
  img.style.height = "100%";
  img.style.width = "100%";
  img.style.objectFit = "contain";
  img.style.imageRendering = imageRendering;

  return img;
}

async function createInscriptionHtml() {
  const imageEl = createInitialImage();
  try {
    await renderImage(imageEl);
  } catch (e) {
    console.error(e);
  } finally {
    // Append the <img> tag to the <body>
    document.body.appendChild(imageEl);
  }
}

window.onload = function () {
  createInscriptionHtml();
};