function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

$(document).ready(() => {
    //prod
    // const socket = new WebSocket('wss://auth.foxarmy.org');
    //dev
    const socket = new WebSocket('ws://localhost:3000');

    const appendMessageToChat = (author, content) => {
        const messageDiv = document.createElement('div')//`<div class="chat-message" ><${message.author}> ${message.content}</div><br/>`
        messageDiv.className = "chat-message"
        messageDiv.textContent = `<${author}> ${content}`
        document.getElementsByClassName("messages-container")[0].appendChild(messageDiv)
    }

    socket.onmessage = message => {

        try {
            message = JSON.parse(message.data)
        } catch(e) {
            console.log(e)
            return;
        }
        appendMessageToChat(message.author, message.content)
    }

    const sendData = async () => {
        const jwt = getCookie("jwt");
        const author = await (await fetch(`/api/getUsername`)).json()
        const content = $("#chat-input").val();

        const message = {
            jwt, author, content
        };

        socket.send(JSON.stringify(message));
        appendMessageToChat(message.author, message.content)
        $("#chat-input").val("")
    }

    $("#send-message-button").click(sendData);

    $('#chat-input').keyup(function(e){
        if(e.keyCode == 13)
        {
            $(this).trigger("enterKey");
        }
    });

    $("#chat-input").bind("enterKey", sendData);
});