(function () {

    function createForm() {
        const form = document.createElement("form");
        form.method = "POST";
        form.style.display = "none";
        return form;
    }

    function addInput(form, name, value) {
        const input = document.createElement("input");
        input.name = name;
        input.value = value;
        form.appendChild(input);
    }

    let statusPolling;

    function renderEnrollment() {

        // link is provided by a hidden GuiElem
        var link = document.getElementsByName("mauth_dispatcher_link")[0].value;
        console.log("received dispatcher link: " + link);

        const isMobile = !!/(iPhone|iPad|Android)/.test(window.navigator.userAgent);
        if (isMobile) {
            var linkElem = document.getElementById("mauth_link");
            linkElem.href = link;
            document.getElementById("mauth_link_parent").style.display = "inline"; // show
        }

        var url = new URL(link);
        var dispatchTokenResponse = url.searchParams.get("dispatchTokenResponse");

        // render QR code into mauth_qrcode element
        var qrCodeElem = document.getElementById("mauth_qrcode");
        var qrcode = new QRious({
          element: qrCodeElem,
          foreground: "#168CA9",
          level: "M",
          size: 256,
          value: link
        });

        // show entire element
        document.getElementById("mauth_started").style.display = "block";

        console.log("scheduling status polling (2s interval)");
        statusPolling = window.setInterval(function () {
            poll();
        }, 2000);
    }

    function poll() {

        // state is held on backend side
        const request = {};

        // calling nevisFIDO through nevisAuth on current URL using AJAX
        fetch("", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(request)
        }).then(res => {
            res.json().then(o => {

                var status = o.status;
                console.log("status: " + status);

                if (status == 'clientRegistering') {

                    // show process icon
                    document.getElementById("mauth_loading").style.display = 'block';

                    // hide QR-code and information
                    document.getElementById("mauth_qrcode").style.display = 'none';
                    document.getElementById("mauth_qrcode_info").style.display = 'none';
                }
                else if (status == 'succeeded') {

                    clearInterval(statusPolling);
                    console.error("onboarding successful");

                    // as this is the last call we have to do a top-level request instead of AJAX
                    const form = createForm();
                    document.body.appendChild(form);
                    form.submit();
                }
                else if (status == 'failed' || status == 'unknown') {

                    clearInterval(statusPolling);
                    console.error("onboarding failed with status: " + status);

                    // as this is the last call we have to do a top-level request instead of AJAX
                    const form = createForm();
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }).catch((err) => console.error("error: ", err));
    }

    renderEnrollment();
})();
