const ws_url = new URL('ws', window.location.href);
ws_url.protocol = ws_url.protocol.replace('http', 'ws');
const ws = new WebSocket(ws_url.href);

function draw_lobby(msg) {
    if (msg.hasOwnProperty('username')) {
        document.getElementById('label-username').innerText = msg.username;
    }
    if (msg.hasOwnProperty('sessions')) {
        const sessions = document.getElementById('sessions');

        while (sessions.children.length) sessions.lastChild.remove();

        Object.keys(msg.sessions).forEach( session => {
            session = msg.sessions[session];
            var sessionid = session["id"];
            var sessionname = session["name"];
            var owned = session["owned"];

            const tehsession = document.createElement('div');
            const labelname = document.createElement('span');
            labelname.innerText = sessionname;
            
            tehsession.appendChild(labelname);

            if (owned) {
                const inputname = document.createElement('input');
                inputname.style.display = "none";
                const btnedit = document.createElement('button');
                btnedit.innerText = '🖉'
                const btnconfirm = document.createElement('button');
                btnconfirm.innerText = '✔'
                btnconfirm.style.display = "none"
                const btndiscard = document.createElement('button');
                btndiscard.innerText = '✘'
                btndiscard.style.display = "none"

                btnedit.onclick = async function (e) {
                    inputname.style.display = "inline-block";
                    inputname.value = sessionname;
                    btnedit.style.display = "none";
                    btnconfirm.style.display = "inline-block";
                    btndiscard.style.display = "inline-block";
                    labelname.style.display = "none";
                }
                btndiscard.onclick = async function (e) {
                    inputname.style.display = "none";
                    btnedit.style.display = "inline-block";
                    btnconfirm.style.display = "none";
                    btndiscard.style.display = "none";
                    labelname.style.display = "inline-block";
                }
                btnconfirm.onclick = async function (e) {
                    text = inputname.value;
                    if (Boolean(text)) {
                        let data = {"sessionid": sessionid, "sessionname": text};
                        await fetch('api/change_sessionname', {
                            method: 'POST',
                            body: JSON.stringify(data),
                        });
                        inputname.style.display = "none";
                        btnedit.style.display = "inline-block";
                        btnconfirm.style.display = "none";
                        btndiscard.style.display = "none";
                        labelname.style.display = "inline-block";
                    } else {
                        console.log("cant be empty");
                    }
                }

                tehsession.appendChild(inputname);
                tehsession.appendChild(btnedit);
                tehsession.appendChild(btnconfirm);
                tehsession.appendChild(btndiscard);
            }

            if ((! msg.hasOwnProperty('session')) || msg.session["id"] != sessionid) {
                const btnjoin = document.createElement('button');
                btnjoin.innerText = "Join";
                btnjoin.onclick = async (e) => await fetch('api/join_session', {
                    method: 'POST', body: JSON.stringify({"sessionid": sessionid})
                });

                tehsession.appendChild(btnjoin);
            }
            
            all_sessions.appendChild(tehsession);
        })
        }
        */
}

ws.onmessage = function(event) {
    const msg = JSON.parse(event.data);

    console.log(msg);

    var view = "lobby";
    if (msg.hasOwnProperty('view')) {
        view = msg.view;
    }
    if (view == "lobby") {
        draw_lobby(msg);
    } else if (view == "session") {
        console.log("cant draw session yet");
    }
};