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);

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

    console.log(msg);
    
    if (msg.hasOwnProperty('session')) {
        document.getElementById('active-session').innerText = msg.session["name"];
        document.getElementById('btn-leave-session').style.display = "inline-block";
    } else {
        document.getElementById('active-session').innerText = "None";
        document.getElementById('btn-leave-session').style.display = "none";
    }
    if (msg.hasOwnProperty('username')) {
        document.getElementById('label-username').innerText = msg.username;
    }

    if (msg.hasOwnProperty('allsessions')) {
        const all_sessions = document.getElementById('all_sessions');

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

        //for (let session in msg.allsessions) {
        Object.keys(msg.allsessions).forEach( session => {

            var sessionid = msg.allsessions[session]["id"]
            var sessionname = msg.allsessions[session]["name"]
            const tehsession = document.createElement('div');

            const labelname = document.createElement('span');
            owned = ("owner" in msg.allsessions[session]);
            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);
        })
    }
};