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

    console.log('I\'m outside clickers');

    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);

        ctx.fillStyle = "#333";

        // 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, 25, 10, 200, 75)
        }

        qrImg.src = qr.toDataURL();
        qrImg.onload = () => {
            ctx.drawImage(qrImg, 25, 90, 200, 200)
        }
        // Draw instrument ID as text
        ctx.font = '48px sans-serif';
        ctx.fillText(idInstr, 45, 330);

        erihsLogo.onload = () => {
            ctx.drawImage(erihsLogo, 25, 355, 200, 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();
        });
    });
});