(function () {
    "use strict";
    var input_div = null;

    function write(msg) {
        common.write(input_div.previousSibling, msg);
    }

    function change_name_button(hub) {
        var btn = document.createElement("button");
        btn.append(document.createTextNode("change name"));
        btn.addEventListener("click", function () {
            setup_change_name(hub);
        });
        return btn;
    }

    function setup_chat(hub) {
        input_div = document.createElement("div");
        input_div.append(common.get_input(function () {
            var input = input_div.getElementsByTagName("input")[0];
            hub.send(input.value);
            input.value = "";
        }));
        input_div.append(document.createTextNode(" "));
        input_div.append(change_name_button(hub));

        document.body.append(document.createElement("div"));
        document.body.append(input_div);
    }

    function setup_change_name(hub) {
        var div = document.createElement("div");
        div.append(document.createTextNode("Enter name: "));
        div.append(common.get_input(function () {
            var client_name = div.children[0].value;
            if (input_div.childNodes[0] !== input_div.children[0]) {
                input_div.childNodes[0].remove();
            }
            input_div.insertBefore(
                document.createTextNode(client_name + " "), input_div.children[0]
            );
            hub.send(JSON.stringify({"action": "set_name", "name": client_name}));
            div.remove();
            input_div.style.display = "";
            input_div.children[0].focus();
        }));
        document.body.append(div);
        input_div.style.display = "none";
        div.children[0].focus();
    }

    function open() {
        setup_chat(this);
        write("connected to " + ws_uri);
        setup_change_name(this);
    }

    function close() {
        write("connection lost");
    }

    function message(msg) {
        var obj = JSON.parse(msg.data);
        if (obj.action === "join" || obj.action === "leave") {
            write("[action]: " + obj.name + " " + obj.action + "s");
        } else if (obj.action == "set_name") {
            write(
                "[action]: " +
                obj.old_name +
                " changes name to " +
                obj.name
            );
        } else if (obj.hasOwnProperty("data")) {
            write(obj.name + ": " + obj.data);
        }
    }

    common.setup(function () {new common.HubClient(ws_uri, open, close, message)});
})();