/**
 * webrtc page script
 *
 * Author: Peter Harpending <peterharpending@qpq.swiss>
 * Date: 2026-02-04
 * Copyright: Copyright (c) 2026 QPQ AG
 *
 * Reference: https://git.qpq.swiss/QPQ-AG/research-megadoc/src/commit/c7c4592d4b21ad120145ef63334471a1a7ec1e60/paste/2026-02/grok-webrtc.html
 *
 * @module
 */

type state =
    {whoami: string,
     roster: Array<string>};

let st: state =
    {whoami: "",
     roster: []};

main();

async function
main
    ()
    : Promise<void>
{
    // start websocket immediately
    let ws: WebSocket;
    let init = document.getElementById('init') as HTMLDivElement;
    let init_join = document.getElementById('init-join') as HTMLButtonElement;

    // handle button click
    init_join.addEventListener('click',
        function() {
            init.hidden = true;
            document.getElementById('run')!.hidden = false;
            ws = new WebSocket('/ws/webrtc');
            ws.onopen    = function(e) { console.log('ws open'); };
            ws.onclose   = function(e) { console.warn('ws closed'); };
            ws.onerror   = function(e) { console.error('ws error:', e); };
            ws.onmessage =
                function(e) {
                    // console.log('ws message:', e.data);
                    let message = JSON.parse(e.data) as ws_msg;
                    handle_ws_msg(message);
                };
        }
    );
}

type ws_msg = ["whoami", string]
            | ["roster", Array<string>];

function
handle_ws_msg
    (message: ws_msg)
    : void
{
    console.log('message from server:', message);
    switch(message[0]) {
        case "whoami":
            st.whoami = message[1];
            break;
        case "roster":
            st.roster = (message[1] as Array<string>);
            break;
        default:
            console.warn("unknown message", message);
    }

    render_state();
}



function
ws_send_json
    (ws : WebSocket,
     x  : any)
    : void
{
    let s: string = JSON.stringify(x, undefined, 4);
    console.log('sending:\n', s);

    ws.send(s);
}



function
render_state
    ()
    : void
{
    console.log('st', st);
    // whoami
    document.getElementById('whoami')!.innerText = st.whoami;
    //
    let roster_ul = document.getElementById('roster-ul') as HTMLUListElement;
    let newChildren : Array<HTMLElement> = [];
    for (let nick of st.roster) {
        if (!(nick === st.whoami)) {
            let li = nickkk(nick);
            newChildren.push(li);
        }
    }
    roster_ul.replaceChildren(...newChildren);
}

function
nickkk
    (nick: string)
    : HTMLElement
{
    let li = document.createElement('li');

    li.innerText += nick;
    li.innerText += ' ';

    let call_a = document.createElement('button');
    call_a.innerText = 'call';

    li.appendChild(call_a);

    return li;
}