////////////////////////////////////////////////////////////////////////////////
// https://bulma.io/documentation/components/navbar/#navbar-menu
function addBurgerMenu() {
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
    // Add a click event on each of them
    $navbarBurgers.forEach (el => {
        el.addEventListener('click', () => {
            const target = el.dataset.target;
            const $target = document.getElementById(target);
            el.classList.toggle('is-active');
            $target.classList.toggle('is-active');
        });
    });
}

////////////////////////////////////////////////////////////////////////////////
function addWSSEventListener () {
    const ws = new WebSocket('wss://' + window.location.host + '~a');

    function receivedMessage(msg) {
        document.getElementById('chat-messages')
            .insertAdjacentHTML('afterbegin', msg.data);
        // document.querySelector('#chat-messages').insertAdjacentHTML('afterbegin', msg.data);
    }

    ws.addEventListener ('message', receivedMessage);
}

function addInputFieldEventListener () {
    const inputField = document.getElementById('chat-input');
    inputField.addEventListener ('keyup', (evt) => {
        if (evt.key === 'Enter') {
            // clear the input on Enter
            evt.target.value = '';
        }
    });
}

////////////////////////////////////////////////////////////////////////////////
function moreInfo() {
    const chatForm = document.getElementById('chat-form');
    const inputField = document.getElementById('chat-input');
    const sendButton = document.getElementById('submit-button');
    chatForm.reset ();
    inputField.focus ();
    document.execCommand('insertText', false, 'More Info!');
    sendButton.click();
}

// Removing the form attribute "disables" the form allowing the
// websocket chat to be used instead.
function disableHTMLForm () {
    const inputField = document.getElementById('chat-input');
    const sendButton = document.getElementById('submit-button');
    inputField.removeAttribute ('form');
    sendButton.removeAttribute ('form');
}

document.addEventListener('DOMContentLoaded', () => {
    addBurgerMenu();
    if (WebSocket) {
        // Use websockets
        addInputFieldEventListener();
        // disableHTMLForm();
        // addWSSEventListener();
    }
    // Fallback will be used otherwise.
});