const IMAGES = {
    base: "/content/4b6e30905dbc66c49cd03cd68453c89f1c05489c17ce1a306574326757b82c13i0",
    numbers: "/content/e4a920da0326f37445a8b764bcc1b9cbc3f5e917a50477a146cd71dd76677038i0"
};

const resultImg = document.getElementById("result");

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

function upscaleImage(img) {
    let tempCanvas = document.createElement('canvas');
    let tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = img.width;
    tempCanvas.height = img.height;

    tempCtx.drawImage(img, 0, 0, img.width, img.height);
    let data = tempCtx.getImageData(0, 0, img.width, img.height).data;

    let largeCanvas = document.createElement('canvas');
    let largeCtx = largeCanvas.getContext('2d');
    largeCanvas.width = img.width * 20;
    largeCanvas.height = img.height * 20;

    let largeImageData = largeCtx.createImageData(largeCanvas.width, largeCanvas.height);
    let largeData = largeImageData.data;

    for (let y = 0; y < img.height; y++) {
        for (let x = 0; x < img.width; x++) {
            let i = (y * img.width + x) * 4;
            let r = data[i];
            let g = data[i + 1];
            let b = data[i + 2];
            let a = data[i + 3];
            for (let largeY = y * 20; largeY < (y + 1) * 20; largeY++) {
                for (let largeX = x * 20; largeX < (x + 1) * 20; largeX++) {
                    let largeI = (largeY * largeCanvas.width + largeX) * 4;
                    largeData[largeI] = r;
                    largeData[largeI + 1] = g;
                    largeData[largeI + 2] = b;
                    largeData[largeI + 3] = a;
                }
            }
        }
    }

    largeCtx.putImageData(largeImageData, 0, 0);

    return largeCanvas;
}

function loadImage(src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
    });
}

async function generateNFT(nftIndex) {
    const baseImg = await loadImage(IMAGES.base);
    canvas.width = baseImg.width * 20;
    canvas.height = baseImg.height * 20;
    const upscaledBase = upscaleImage(baseImg);
    ctx.drawImage(upscaledBase, 0, 0);

    const numbersImg = await loadImage(IMAGES.numbers);
    const upscaledNumbers = upscaleImage(numbersImg);

    let tensIndex = Math.floor(nftIndex / 10);
    let onesIndex = (nftIndex % 10) + 5;

    let numberWidth = baseImg.width;
    let numberHeight = baseImg.height;

    ctx.drawImage(
        upscaledNumbers,
        tensIndex * numberWidth * 20, 0, numberWidth * 20, numberHeight * 20,
        0, 0, numberWidth * 20, numberHeight * 20
    );

    ctx.drawImage(
        upscaledNumbers,
        onesIndex * numberWidth * 20, 0, numberWidth * 20, numberHeight * 20,
        0, 0, numberWidth * 20, numberHeight * 20
    );

    resultImg.src = canvas.toDataURL("image/png");
	
	resultImg.style.minWidth = baseImg.width + 'px';
	resultImg.style.minHeight = baseImg.height + 'px';

    resultImg.addEventListener("load", () => {
        resultImg.style.display = "block";
    });
}