const tournaments = JSON.parse(document.getElementById('tournaments_list').textContent)
const sockets = {}

for (let tournament of tournaments) {
    let socket = new WebSocket(
        'ws://' + window.location.host + '/ws/draw/' + tournament.id + '/'
    )
    sockets[tournament.id] = socket

    // TODO: For now, we only have a chatbot. Need to implementthe drawing interface
    socket.onmessage = function(e) {
        console.log(e.data)
        const data = JSON.parse(e.data)
        console.log(data)
        document.querySelector('#chat-log-' + tournament.id).value += (data.message + '\n')
    }

    socket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly')
    }

    document.querySelector('#chat-message-' + tournament.id + '-input').focus();
    document.querySelector('#chat-message-' + tournament.id + '-input').onkeyup = function(e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-' + tournament.id + '-submit').click();
        }
    };

    document.querySelector('#chat-message-' + tournament.id + '-submit').onclick = function(e) {
        const messageInputDom = document.querySelector('#chat-message-' + tournament.id + '-input');
        const message = messageInputDom.value;
        socket.send(JSON.stringify({
            'message': message
        }));
        messageInputDom.value = '';
    };
}