/// <reference lib="dom" />

const ws = new WebSocket("/webui_ws")
ws.onopen = () => console.log("ws open");
ws.onerror = () => console.warn("ws error");
ws.onclose = () => {
    console.warn("ws close");
    document.body.innerHTML +=
        `<p style="position:absolute;top:10px;left:10px;font-size:larger;background-color:red;padding:1em;">Websocket connection lost.</p>`
    setTimeout(() => globalThis.location.reload(), 500)
}
ws.onmessage = ev => {
    const u = JSON.parse(ev.data)
    if (u.t == "update_worker") {
        const e = document.getElementById(`worker-${u.id}`)
        if (e) e.outerHTML = u.html
        else document.querySelector("#workers > ul").innerHTML += u.html
    } else if (u.t == "remove_worker") {
        document.getElementById(`worker-${u.id}`)?.remove()
    } else if (u.t == "update_task") {
        const e = document.getElementById(u.key)
        const parent_id = u.bin == "queue" ? "bin-queue" : u.bin == "loading" ? "bin-loading" : "bin-complete"
        const parent = document.querySelector(`#${parent_id} > ul`)
        if (e && e.parentElement == parent) e.outerHTML = u.html
        else {
            e?.remove()
            parent.innerHTML += u.html
        }
    } else if (u.t == "remove_task") {
        document.getElementById(u.key)?.remove()
    } else if (u.t == "counters") {
        document.querySelector("#bin-queue .count").textContent = `${u.queue} tasks`
        document.querySelector("#bin-loading .count").textContent = `${u.loading} tasks`
        document.querySelector("#bin-complete .count").textContent = `${u.complete} tasks`
    }
}