document.addEventListener('DOMContentLoaded', () => {
    const download = document.querySelector('#download');

    document.querySelector('#gen').addEventListener('click', () => {
        let link = document.querySelector('input[name="link"]').value;
        let idInstr =document.querySelector('input[name="id-str"]').value; 

        let canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width, canvas.height);

        const txtColor = "#000";
        const qrWidth = 220;
        const leftMargin = 12;

        ctx.fillStyle = txtColor;

        // Prepare img elements
        const qrImg = new Image();
        const ispcLogo = new Image();
        const erihsLogo = new Image();

        ispcLogo.src = "./img/logo_ispc.png";
        erihsLogo.src = "./img/e-rihsit_logo.png";

        let qr = new QRious({element: qrImg});

        qr.set({
            size: 200,
            value: link
        })

        // Draw images
        ispcLogo.onload = () => {
            ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75)
        }

        qrImg.src = qr.toDataURL();
        qrImg.onload = () => {
            ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth)
        }
        // Draw instrument ID as text
        ctx.font = '48px sans-serif';
        const txtWidth = Math.round(ctx.measureText(idInstr).width);
        const txtLeftDist = (220 - txtWidth) / 2 + leftMargin;
        ctx.fillText(idInstr, txtLeftDist, 352);

        erihsLogo.onload = () => {
            ctx.drawImage(erihsLogo, 20, 370, 210, 41)
        }
        download.classList.remove('disabled');
    });

    download.addEventListener('click', () => {
        let downloadLink = document.createElement('a');
        downloadLink.setAttribute('download', 'etichetta.png');
        let canvas = document.querySelector('canvas');

        canvas.toBlob(function(blob) {
            let url = URL.createObjectURL(blob);
            downloadLink.setAttribute('href', url);
            downloadLink.click();
        });
    });
});