const statusElement = document.getElementById("status");
const progressElement = document.getElementById("progress");
const spinnerElement = document.getElementById("spinner");
const canvasElement = document.getElementById("canvas");
const outputElement = document.getElementById("output");

if (outputElement) {
    outputElement.value = "";
}

canvasElement.addEventListener(
    "webglcontextlost",
    (event) => {
        alert("WebGL context lost. You will need to reload the page.");
        event.preventDefault();
    },
    false
);

function setStatus(text) {
    if (!setStatus.last) {
        setStatus.last = { time: Date.now(), text: "" };
    }

    if (text === setStatus.last.text) {
        return;
    }

    const match = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
    const now = Date.now();

    if (match && now - setStatus.last.time < 30) {
        return;
    }

    setStatus.last.time = now;
    setStatus.last.text = text;

    if (match) {
        statusElement.innerHTML = match[1].trim();
        progressElement.value = 100 * parseInt(match[2], 10);
        progressElement.max = 100 * parseInt(match[4], 10);
        progressElement.hidden = false;
        spinnerElement.hidden = false;
    } else {
        statusElement.innerHTML = text;
        progressElement.value = null;
        progressElement.max = null;
        progressElement.hidden = true;

        if (!text) {
            spinnerElement.style.display = "none";
        }
    }
}

var Module = window.Module || {};
Module.print = (...args) => {
    console.log(...args);

    if (!outputElement) {
        return;
    }

    const text = args.join(" ");
    outputElement.value += text + "\n";
    outputElement.scrollTop = outputElement.scrollHeight;
};
Module.canvas = canvasElement;
Module.setStatus = setStatus;
Module.totalDependencies = 0;
Module.monitorRunDependencies = function (left) {
    this.totalDependencies = Math.max(this.totalDependencies, left);
    setStatus(
        left
            ? "Preparing... (" + (this.totalDependencies - left) + "/" + this.totalDependencies + ")"
            : "All downloads complete."
    );
};

setStatus("Downloading...");

window.onerror = (message) => {
    setStatus("Exception thrown, see JavaScript console");
    spinnerElement.style.display = "none";
    setStatus = (text) => {
        if (text) {
            console.error("[post-exception status] " + text);
        }
    };
    return message;
};

window.Module = Module;