let sumCompute, detailCompute, pgCompute, detailEncoder, pgEncoder, detailDecoder, pgDecoder, coreTemp, memoryUsed, pgMemory, procList;

window.addEventListener('load', () => {
    loadElements();
    setTimeout(tick, 2000);
});

function loadElements() {
    sumCompute = document.getElementById("sum-compute");
    detailCompute = document.getElementById("detail-compute");
    pgCompute = document.getElementById("pg-compute");

    detailEncoder = document.getElementById("detail-encoder");
    pgEncoder = document.getElementById("pg-encoder");

    detailDecoder = document.getElementById("detail-decoder");
    pgDecoder = document.getElementById("pg-decoder");

    coreTemp = document.getElementById("core-temp");

    memoryUsed = document.getElementById("memory-used");
    pgMemory = document.getElementById("pg-memory");

    procList = document.getElementById("proc-list");
}

function tick() {
    update();
    setTimeout(tick, 2000);
}

function update() {
    const jsonURL = location.href + "/json"
    
    axios({
        method: 'get',
        url: jsonURL
    }).then((res) => {
        const gpu = res.data;
        setCompute(gpu.usage.compute);
        setEncoder(gpu.usage.encoder);
        setDecoder(gpu.usage.decoder);
        setCoreTemp(gpu.temperature);
        setMemory(gpu.memory.used, gpu.memory.total);
        setProcessList(gpu.processes);
    })
}

function setCompute(value) {
    const placeholder = `${value}%`;
    sumCompute.innerText = placeholder;
    detailCompute.innerText = placeholder;
    pgCompute.style.width = placeholder;
    pgCompute.setAttribute("aria-valuenow", value);
}

function setEncoder(value) {
    const placeholder = `${value}%`;
    detailEncoder.innerText = placeholder;
    pgEncoder.style.width = placeholder;
    pgEncoder.setAttribute("aria-valuenow", value);
}

function setDecoder(value) {
    const placeholder = `${value}%`;
    detailDecoder.innerText = placeholder;
    pgDecoder.style.width = placeholder;
    pgDecoder.setAttribute("aria-valuenow", value);
}

function setCoreTemp(value) {
    const placeholder = `${value.Current}°C (min: ${value.Min}°C, max: ${value.Max}°C)`;
    coreTemp.innerText = placeholder;
}

function setMemory(used, total) {
    const placeholder = formatBytes(used);
    const p = (used/total)*100;
    memoryUsed.innerText = placeholder;
    pgMemory.style.width = p+'%';
    pgMemory.setAttribute("aria-valuenow", p);
}

function setProcessList(processes) {
    procList.innerHTML = "";
    for (const process of processes) {
        const row = document.createElement("tr");
        
        const pid = document.createElement("td");
        pid.innerText = process.pid;
        const type = document.createElement("td");
        type.innerText = process.type;
        const name = document.createElement("td");
        name.innerText = process.commandLine;
        const mem = document.createElement("td");
        mem.innerText = formatBytes(process.memoryUsed);
        row.append(pid, type, name, mem);
        procList.append(row);
    }
}

function formatBytes(bytes, decimals = 2) {
    if (!+bytes) return '0 Bytes'

    const k = 1024
    const dm = decimals < 0 ? 0 : decimals
    const sizes = ['B', 'KB', 'MB', 'GB']

    const i = Math.floor(Math.log(bytes) / Math.log(k))

    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
}