/*
{
  "p": "gen-brc-721",
  "op": "compile",
  "s": "phantom-test-4"
}
*/

const deployInscriptionId = '70880ccedc33d746af608c14b1b4db3c4926589b0236b12f8b1b4540e9e3c6f1i0';
const renderSize = {width: 1000, height: 1000};

async function createInscriptionHtml() {
    const collectionMetadata = await fetch(`/content/${deployInscriptionId}`).then(res => res.json());
    const inscriptions = document.querySelector('script[t]').getAttribute('t').split(',').map(index => "/content/" + collectionMetadata.attributes[index]);

    document.body.style.margin = '0px';
    document.body.style.padding = '0px';

    const img = document.createElement('img');
    img.id = 'img';
    img.style = 'height: 100%; width: 100%; object-fit: contain; image-rendering: pixelated;';
    document.body.appendChild(img);

    const loadImage = url => new Promise((resolve, reject) => {
        const image = document.createElement('img');
        image.src = url;
        image.crossOrigin = 'anonymous';
        image.onload = () => resolve(image);
        // image.onerror = () => image.src = 'https://ord-mirror.magiceden.dev' + url;
    });

    function renderImage(urls) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext("2d");

      canvas.width = renderSize.width;
      canvas.height = renderSize.height;
      ctx.imageSmoothingEnabled = false;

      Promise.all(urls.map(loadImage)).then(images => {
        images.forEach(image => ctx.drawImage(image, 0, 0, canvas.width, canvas.height));
        img.src = canvas.toDataURL("image/png");
      });
    }

    renderImage(inscriptions);
}

createInscriptionHtml();