let MAIN = null;
let MENU = null;
let SCENE = null;

let CONNECTED = false;
let SOCKET = null;
let USER = null;
let CONTEXT = null;

let UI = {
    text:function(value) {
        return document.createTextNode(value);
    },

    button:function(text, callback) {
        let b = document.createElement("button");
        b.innerText = text;
        if(callback !== null) { b.addEventListener("click", callback); }
        return b;
    },

    div:function(children) {
        let div = document.createElement("div");
        for(child of children) { div.appendChild(child); }
        return div;
    },

    table:function(header, rows) {
        let table = document.createElement("table");
        let tbody = document.createElement("tbody");

        if(header !== null) {
            let row = document.createElement("tr");
            for(head of header) {
                let cell = document.createElement("th");
                cell.innerText = head;
                row.appendChild(cell);
            }
            tbody.appendChild(row);
        }

        for(row of rows) {
            let tr = document.createElement("tr");
            for(node of row) {
                let cell = document.createElement("td");
                if(Array.isArray(node)) { for(item of node) { cell.appendChild(item); } }
                else { cell.appendChild(node); }
                tr.appendChild(cell);
            }
            tbody.appendChild(tr);
        }

        table.appendChild(tbody);
        return table;
    },

    mainnav:function(left_children, right_children) {
        let header = document.createElement("nav");
        let left = document.createElement("section");
        for(child of left_children) { left.appendChild(child); }

        let right = document.createElement("section");
        for(child of right_children) { right.appendChild(child); }

        header.appendChild(left);
        header.appendChild(right);
        return header;
    },

    mainmenu:function() {
        if(SOCKET !== null) {
            MENU.appendChild(UI.button("Online", function() { LOAD(SCENE.Online); }));
            MENU.appendChild(UI.button("Continue", function() { LOAD(SCENE.Continue); }));
            MENU.appendChild(UI.button("Join", function() { LOAD(SCENE.Continue); }));
            MENU.appendChild(UI.button("Live", function() { LOAD(SCENE.Continue); }));
            MENU.appendChild(UI.button("History", function() { LOAD(SCENE.Continue); }));
            MENU.appendChild(UI.button("Guide", function() { LOAD(SCENE.Continue); }));
            MENU.appendChild(UI.button("About", function() { LOAD(SCENE.Continue); }));
        }
    },
};

function RECONNECT() {
    if(SOCKET === null) {
        console.log("Websocket connecting..");
        SOCKET = new WebSocket("wss://omen.kirisame.com:38612");
        SOCKET.binaryType = 'blob';
        SOCKET.addEventListener("error", (event) => {
            SOCKET = null;
            LOAD(SCENES.Offline)
        });
        SOCKET.addEventListener("open", (event) => {
            if(SOCKET.readyState === WebSocket.OPEN) {
                console.log("Websocket connected.");

                SOCKET.addEventListener("message", (event) => {
                    MESSAGE(event.data);
                });

                SOCKET.addEventListener("close", (event) => {
                    console.log("Websocket closed.");
                    SOCKET = null;
                    RECONNECT();
                });

                RESUME();
                SOCKET.send(new Uint8Array([ 0 ]));
            }
        });
    }
}

function RESUME() {
    LOAD(SCENES.Online);
}

const SCENES = {
    Init:{
        load:function() {
            LOAD(SCENES.Offline);
            RECONNECT();
            return true;
        },
    },

    Offline:{
        load:function() {
            MENU.appendChild(UI.button("Reconnect", function() { RECONNECT(); }))
            return true;
        },
    },

    Online:{
        load:function() {
            UI.mainmenu();
            MAIN.appendChild(UI.mainnav([
                UI.button("Start", null),
            ], [
                UI.div([UI.text("0 - 0 of 0")]),
                UI.button("◀", null),
                UI.button("▶", null),
            ]));
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            MAIN.appendChild(table);

            this.refresh();
            return true;
        },
        refresh:function() {
            let request = new Uint8Array();

            //SERVER.send()

            let cb = function() {
                let table = document.getElementById("content");
                MAIN.removeChild(table);

                let data = [
                    [ UI.text("Player1"), UI.text("Player2"), UI.text("0"), UI.text("Ha1-D ◈ Ba1-M"), UI.text("0"), [ UI.button("Join", null), UI.button("Spectate", null) ] ],
                ];

                MAIN.appendChild(UI.table(
                    [ "Dawn", "Dusk", "Turn", "Move", "Spectators", "" ],
                    data,
                ));
            };
            cb();
        },
    },

    Continue:{
        load:function() {
            if(USER === null) return false;
            UI.mainmenu();
            MAIN.appendChild(UI.mainnav([
                UI.button("Start", null),
            ], [
                UI.button("◀", null),
                UI.button("▶", null),
            ]));
            return true;
        },
        refresh:function() {

        },
    },

    Join:{
        load:function() {
            if(USER === null) return false;
            UI.mainmenu();
            MAIN.appendChild(UI.mainnav([
                UI.button("Start", null),
            ], [
                UI.button("◀", null),
                UI.button("▶", null),
            ]));
            return true;
        },
        refresh:function() {

        },
    },

    Live:{
        load:function() {
            UI.mainmenu();
            MAIN.appendChild(UI.mainnav([
                UI.button("Start", null),
            ], [
                UI.button("◀", null),
                UI.button("▶", null),
            ]));
            return true;
        },
        refresh:function() {

        },
    },

    History:{
        load:function() {
            UI.mainmenu();
            MAIN.appendChild(UI.mainnav([ ], [
                UI.button("◀", null),
                UI.button("▶", null),
            ]));
            return true;
        },
        refresh:function() {

        },
    },

    Guide:{
        load:function() {
            UI.mainmenu();
            return true;
        },
        refresh:function() {

        },
    },

    About:{
        load:function() {
            UI.mainmenu();
            return true;
        },
        refresh:function() {

        },
    },

    Game:{
        load:function() {
            MENU.appendChild(UI.button("Back", function() { LOAD(SCENES.Online) }));
            MENU.appendChild(UI.button("Retire", function() { }));
            return true;
        },
        unload:function() {

        },
        refresh:function() {

        },
    },
};

function REBUILD() {
    MENU = document.createElement("nav");
    let title = document.createElement("header");
    title.innerText = "Omen";
    MENU.appendChild(title);

    MAIN = document.createElement("main");

    document.body.appendChild(MENU);
    document.body.appendChild(MAIN);
}

function MESSAGE() {

}

function LOAD(scene) {
    if(SCENE.unload !== undefined) { SCENE.unload(); }
    while(document.body.lastChild !== null) { document.body.removeChild(document.body.lastChild); }
    REBUILD();
    SCENE = scene;
    if(!SCENE.load()) { LOAD(SCENES.Online); }
}

document.addEventListener("DOMContentLoaded", function() {
    SCENE = SCENES.Offline;
    LOAD(SCENES.Init);
});