const apis = [
    {
        "id":"Main",
        "url":"https://api.nolancasey.click/server",
        "online": true,
        "failedAttempts": 0,
        "cpu": null,
        "threads": null,
        "ram": null,
        "swap": null
    },
    {
        "id":"Lightweight",
        "url":"https://api.nolancasey.click/lightweight",
        "online": true,
        "failedAttempts": 0,
        "cpu": null,
        "threads": null,
        "ram": null,
        "swap": null
    },
    {
        "id":"Proxy",
        "url":"https://api.nolancasey.click/proxy",
        "online": true,
        "failedAttempts": 0,
        "cpu": null,
        "threads": null,
        "ram": null,
        "swap": null
    }
];
const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"];
const resolution = 32;

window.addEventListener("load", async function () {
    apis.forEach(api => {
        var div = this.document.createElement("div");
        div.id = api.id;
        div.classList.add("box");
        div.classList.add("vflex");
        div.classList.add("thin");
        document.body.insertBefore(div, document.body.lastElementChild);
        document.body.insertBefore(document.createElement("br"), document.body.lastElementChild);
    });
    apis.forEach(async api => {
        var json;
        // var div = document.getElementById(api.id);
        var div = document.getElementById(api.id);
        
        try{
            var response = await fetch(api.url);
            if (!response.ok){
                throw new Error(response.status);
            }
            json = await response.json();

            var title = document.createElement("h3");
            var hr = document.createElement("hr");
            title.innerText = api.id + " Server";
            var cpuCanvas = document.createElement("canvas");
            cpuCanvas.id = api.id + "_cpu";
            var br1 = document.createElement("br");
            var threadsCanvas = document.createElement("canvas");
            threadsCanvas.id = api.id + "_threads";
            var br2 = document.createElement("br");

            var memDiv = document.createElement("div");
            memDiv.classList.add("center-flex")
            var ramCanvas = document.createElement("canvas");
            ramCanvas.classList.add("donut");
            ramCanvas.id = api.id + "_ram";
            var swapCanvas = document.createElement("canvas");
            swapCanvas.classList.add("donut");
            swapCanvas.id = api.id + "_swap";
            memDiv.appendChild(ramCanvas);
            memDiv.appendChild(swapCanvas);

            var br3 = document.createElement("br");

            div.appendChild(title);
            div.appendChild(hr);
            div.appendChild(cpuCanvas);
            div.appendChild(br1);
            div.appendChild(threadsCanvas);
            div.appendChild(br2);
            div.appendChild(memDiv);
            div.appendChild(br3);

            var labels = [];
            for (var i = 0; i < resolution; i++){
                labels.push("");
            }
        
            var datasets = [];
            {
                var data = []
                for (var j = 0; j < resolution; j++) data.push(0);
                data[resolution - 1] = json["cpu0"]
                datasets.push(
                    {
                        label: "Total Utilization",
                        data: data,
                        borderColor: colors[0],
                        fill: false,
                        pointRadius: 0
                    }
                )
            }
        
            api["cpu"] = new Chart(api.id + "_cpu",{
                type: "line",
                data:{
                    labels: labels,
                    datasets: datasets
                },
                options:{
                    responsive: true,
                    title:{
                        display: true,
                        text: "Total Utilization",
                        position: "top"
                    },
                    animation:{
                        duration: 0
                    },
                    legend:{
                        display: false
                    }
                }
            });
        
            datasets = [];
            for (var i = 1; i < json["cpuCount"] + 1; i++){
                var data = []
                for (var j = 0; j < resolution; j++) data.push(0);
                data[resolution - 1] = json["cpu" + i]
                datasets.push(
                    {
                        label: "cpu" + i,
                        data: data,
                        borderColor: colors[i - 1],
                        fill: false,
                        pointRadius: 0,
                        borderWidth: 2.
                    }
                );
            }
        
            api["threads"] = new Chart(api.id + "_threads", {
                type: "line",
                data:{
                    labels: labels,
                    datasets: datasets
                },
                options:{
                    responsive: true,
                    title:{
                        display: true,
                        text: "Thread Utilization",
                        position: "top"
                    },
                    legend:{
                        position: "bottom"
                    },
                    animation:{
                        duration: 0
                    }
                }
            });
        
            var x = ["Used", "Free"]
            api["ram"] = new Chart(api.id + "_ram",{
                type: "doughnut",
                data:{
                    labels: x,
                    datasets:[
                        {
                            data: [json["usedRam"], json["totalRam"] - json["usedRam"]],
                            backgroundColor: ["darkred", "lightcoral"]
                        }
                    ]
                },
                options:{
                    responsive: false,
                    title:{
                        display: true,
                        text: "RAM Usage",
                        position: "top"
                    },
                    animation:{
                        duration: 0
                    }
                }
            });
        
            api["swap"] = new Chart(api.id + "_swap",{
                type: "doughnut",
                labels: x,
                data:{
                    labels: x,
                    datasets:[
                        {
                            data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]],
                            backgroundColor: ["darkgreen", "lawngreen"]
                        }
                    ]
                },
                options:{
                    responsive: false,
                    title:{
                        display: true,
                        text: "Swap Usage",
                        position: "top"
                    },
                    animation:{
                        duration: 0
                    }
                }
            });
        }catch (error){
            div.textContent = "";
            api.online = false;
            var p = document.createElement("h3");
            var node = document.createTextNode("Connection error to server: " + api.id);
            var br = document.createElement("br");
            console.log(api.id + " Server Offline");
            p.appendChild(node);
            div.appendChild(p);
            div.appendChild(br);
            console.log(error.message);
        }
    });

    this.setInterval(increment, 1000);
});

async function increment() {
    apis.forEach(async api => {
        if (!api.online) return;
        try{
            var response = await fetch(api.url);
            if (!response.ok){
                throw new Error(response.status);
            }
            var json = await response.json();
            api.failedAttempts = 0;

            for (var i = 1; i < resolution; i++){
                api["cpu"].data.datasets[0].data[i - 1] = api["cpu"].data.datasets[0].data[i];
            }
            api["cpu"].data.datasets[0].data[resolution - 1] = json["cpu0"];
            api["cpu"].update();
            for (var i = 0; i < json["cpuCount"]; i++){
                for (var j = 1; j < resolution; j++){
                    api["threads"].data.datasets[i].data[j - 1] = api["threads"].data.datasets[i].data[j];
                }
                api["threads"].data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)];
            }
            api["threads"].update();
            api["ram"].data.datasets[0].data[0] = json["usedRam"];
            api["ram"].data.datasets[0].data[1] = json["totalRam"] - json["usedRam"];
            api["swap"].data.datasets[0].data[0] = json["usedSwap"];
            api["swap"].data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"];
            api["ram"].update();
            api["swap"].update();
        }catch (error){
            if (api.failedAttempts > 5){
                api.online = false;
                var div = document.getElementById(api.id);
                div.textContent = "";
                var p = document.createElement("h3");
                var node = document.createTextNode("Connection error to server: " + api.id);
                var br = document.createElement("br");
                console.log(api.id + " Server Offline");
                p.appendChild(node);
                div.appendChild(p);
                div.appendChild(br);
                console.log(error.message);
            }else{
                api.failedAttempts += 1;
            }
        }
    });
}