(($) => {
    var ws = new WebSocket("ws://localhost:8000/ws");
    const input = $("#message");
    const messages = $('#messages');
    var lastMessage;

    $('#button').on('click', () => {
        const message = input.val();

        if (message) {
            ws.send(message);
            lastMessage = $('<div class="message received"><p>Loading...</p></div>')
            messages.append(`<div class="message sent"><p>${message}</p></div>`)
            messages.append(lastMessage);

            input.val("");
        }
    });

    ws.onmessage = (event) => {
        if (lastMessage.text() === "Loading...") {
            lastMessage.empty();
        }

        var content = document.createTextNode(event.data);

        if (content.textContent === "<<END>>") {
            lastMessage.html(marked.parse(lastMessage.text()));
        }
        else {
            lastMessage.append(content);
        }
    };
})(jQuery);