"use strict";

var cloned = false

const cloneGame = (g) => {
    const tmpl = document.querySelector("template#tmpl");
    const disp = document.querySelector("#game");
    const clone = document.importNode(tmpl.content, true);
    const localPlayer = clone.querySelector("#player").content.cloneNode(true)
    localPlayer.querySelector("div").setAttribute("id", "local-player")
    const remotePlayer = clone.querySelector("#player").content.cloneNode(true)
    remotePlayer.querySelector("div").setAttribute("id", "remote-player")

    disp.replaceChildren(remotePlayer, clone, localPlayer);
    showGame(disp, g)
}

const showGame = (n, g) => {
    console.debug(g)
    doDistance(n, g.Distance.Value);
    doActions(n, g.Actions);
    doPlayer(n.querySelector("#local-player"), g[g.You])
    doPlayer(n.querySelector("#remote-player"), g[g.Them])
};

const doPlayer = (n, p) => {
    doPool(n.querySelector(".life"), p.Life.Value)
    doPool(n.querySelector(".aura"), p.Life.Value)

}

const doPool = (node, value) => {
    node.setAttribute("data-value", value);
    node.querySelectorAll(".sakura").forEach((n, i) => {
        const shouldCheck = (n.getAttribute("data-ordering") ?? i) < value
        n.checked = shouldCheck
        n.setAttribute("checked", shouldCheck)
    })
    const valueNode = node.querySelector(".pool-value")
    if (valueNode)
        valueNode.innerText = value
}

const doDistance = (node, value) => {
    const distance = node.querySelector("#distance")
    doPool(distance, value)
};


let actionTemplate

const doActions = (g, actions) => {
    const actionList = g.querySelector("#actions");
    if (!actionTemplate) {
        actionTemplate = document.importNode(actionList.querySelector("template").content.querySelector(".action"), true)
    }
    if (actions) {
        actionList.replaceChildren(
            ...actions.map((a, i) => {
                const newAction = actionTemplate.cloneNode(true);
                newAction.setAttribute("data-index", i);
                newAction.querySelector(".description").innerText = a.Description;
                return newAction;
            }),
        );
    } else {
        actionList.replaceChildren()
    }
};

const doAction = (idx) => {
    window.socket.send(String(idx))
}

const connect = (gameId) => {
    const connection = new WebSocket(`/api/game/${gameId}/connect`);
    window.socket = connection;
    connection.addEventListener("message", (ev) => {
        const game = JSON.parse(ev.data);
        if (cloned) {
            showGame(document.querySelector("#game"), game)
        } else {
            cloneGame(game)
            cloned = true
        }
        document.querySelector("#game-json").innerText = JSON.stringify(
            ev.data,
            null,
            2,
        );
    });
};

const init = () => {
    const id = window.location.hash.slice(1);
    connect(id);
};

init();