const url = "https://www.facebook.com/";

const bodyEl = document.querySelector("body");
const qrCodeCanvasEl = document.querySelector("#qrCodeCanvas");
const invitationLinkInputEl = document.querySelector("#invitationLinkInput");

const displayToastAlert = async (message) => {
    let toastAlertTemplate = "";

    await fetch("./toastAlert.mustache")
        .then(res => res.text())
        .then(template => {
            toastAlertTemplate = template;
        });

    return Mustache.render(toastAlertTemplate, { message });
};

(async () => {
    const qrCode = new QRCodeStyling({
        width: 425,
        height: 425,
        type: "svg",
        data: url,
        image: "./assets/icon.png",
        dotsOptions: {
            color: "#ffffff",
            type: "rounded"
        },
        backgroundOptions: {
            color: getComputedStyle(bodyEl).backgroundColor || "#000000",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });
    
    qrCode.append(qrCodeCanvasEl);

    invitationLinkInputEl.value = url;

    copyBtn.addEventListener("click", async () => {
        navigator.clipboard.writeText(invitationLinkInputEl.value);

        bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("Invitation link copied to clipboard."));

        setTimeout(() => {
            bodyEl.lastElementChild.remove();
        }, 3000);
    });
})();