/**
 * @param {string} link
 * @param {string} idInstr
 * @returns {object}
 */
function validate(link, idInstr) {
    const pattern = /[A-Z0-9]{3}_[0-9]{2}/;

    return {
        linkError : link !== '',
        idInstrError : pattern.test(idInstr)
    }
}

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

    document.querySelector('#gen').addEventListener('click', () => {
        const errors = document.querySelectorAll(".toast-error");

        for (let error of errors) {
            error.className = 'text-center toast toast-error d-hide';
        }

        let link = document.querySelector('input[name="link"]').value;
        const idInput = document.querySelector('input[name="id-str"]');
        const idInstr = idInput.value; 

        if (!validate(link, idInstr).linkError) {
            errors[0].classList.remove('d-hide');
            return;
        }

        if (!validate(link, idInstr).idInstrError) {
            errors[1].classList.remove('d-hide');
            return;
        }

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

        const txtColor = "#000";
        const qrSize = 225;
        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: qrSize,
            value: link
        })

        // Draw images
        ispcLogo.onload = () => {
            ctx.drawImage(ispcLogo, leftMargin + 4, 10, 210, 79)
        }

        qrImg.src = qr.toDataURL();
        qrImg.onload = () => {
            ctx.drawImage(qrImg, leftMargin, 90, qrSize, qrSize)
        }
        // 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, 12, 370, 220, 43)
        }
        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();
        });
    });
});