$(function () {
    let main = $(".thread + hr");

    main.after(
        '<div id="live-info" class="box inline-block"><span id="live-indicator"></span> <span id="live-status"></span></div><br>'
    );

    $("#live-indicator").css("background-color", "orange");
    $("#live-status").text("Připojování...");

    let thread = window.location.pathname.split("/").slice(-2);
    let protocol;

    if (window.location.protocol === "https:") {
        protocol = "wss:";
    } else {
        protocol = "ws:";
    }

    let last_post = $(".thread").find(".post").last().attr("id");

    let ws_location = `${protocol}//${window.location.host}/live/${thread[0]}/${thread[1]}/${last_post}`;
    let ws = new WebSocket(ws_location);

    ws.addEventListener("open", function (_) {
        $("#live-indicator").css("background-color", "lime");
        $("#live-status").text("Připojeno pro nové příspěvky");
    });

    ws.addEventListener("message", function (msg) {
        let data = JSON.parse(msg.data);

        switch (data.type) {
            case "created":
                $(".thread").append(data.html + "<br>");
                update_expandable($(`#${data.id} .expandable`));
                update_reltimes($(`#${data.id}`).find("time"));
                update_quote_links($(`#${data.id}`).find(".quote-link"));
                break;
            case "updated":
                $(`#${data.id}`).replaceWith(data.html);
                update_expandable($(`#${data.id} .expandable`));
                update_reltimes($(`#${data.id}`).find("time"));
                update_quote_links($(`#${data.id}`)).find(".quote-link");
                break;
            case "removed":
                if (data.id === parseInt(thread[1])) {
                    ws.close();
                    $("#live-indicator").css("background-color", "red");
                    $("#live-status").text("Vlákno bylo odstraněno");
                    return;
                }

                $(`#${data.id}`).next("br").remove();
                $(`#${data.id}`).remove();
                break;
            default:
                break;
        }
    });

    ws.addEventListener("close", function (_) {
        $("#live-indicator").css("background-color", "red");
        $("#live-status").text("Odpojeno, obnov stránku");
    });
});