/*
{
  "p": "brc69",
  "op": "compile",
  "s": "inscribe_test"
}
*/

const collectionJsonUrl = '/content/958cfbfc4d4931b70e16edc114c909432a592e014b96cb56e6619192c1b7eeddi0';
const previewUrl = ''; // if preview available
const imageRendering = 'auto';
const renderSize = { width: 64, height: 64 };

async function loadImage(url) {
    return new Promise((resolve, reject) => {
        const image = document.createElement('img');
        image.src = url;
        image.crossOrigin = 'anonymous';
        image.onload = () => {
            resolve(image);
        };
    });
}

async function renderImage(imageEl, urls) {
    const canvas = document.createElement('canvas');
    canvas.width = renderSize.width;
    canvas.height = renderSize.height;

    const ctx = canvas.getContext("2d");
    ctx.imageSmoothingEnabled = false;

    const images = await Promise.all((urls).map(loadImage));
    images.forEach(_ => ctx.drawImage(_, 0, 0, canvas.width, canvas.height));
    imageEl.src = canvas.toDataURL("image/png");
}

function createInitialImage() {
    document.body.style.margin = '0px';
    document.body.style.padding = '0px';

    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 fetchCollectionData(collectionJsonUrl) {
    const response = await fetch(collectionJsonUrl);
    if (!response.ok) throw new Error('Network response was not ok.');
    return await response.json();
}

function extractTraitPaths(attributes, selectedTraitIndexes) {
    return selectedTraitIndexes.map((traitIndex, order) => {
        const attribute = attributes.find(attr => attr.order === order);
        if (!attribute) throw new Error(`Attribute with order ${order} not found.`);
        
        const trait = attribute.traits[traitIndex];
        if (!trait) throw new Error(`Trait with index ${traitIndex} in order ${order} not found.`);
        
        return `${trait[2]}`;
    });
}

async function createInscriptionHtml() {
    const img = createInitialImage();

    try {
        const collectionData = await fetchCollectionData(collectionJsonUrl);
        const selectedTraitIndexes = document.querySelector('script[t]').getAttribute('t').split(',').map(Number);
        
        const traitPaths = extractTraitPaths(collectionData.attributes, selectedTraitIndexes);
        
        await renderImage(img, traitPaths);
    } catch (error) {
        console.error(error);
        if (previewUrl) {
            img.src = previewUrl;
        }
    } finally {
        document.body.appendChild(img);
    }
}

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