var socket;
var username = "";

function addMessage(author, message) {
    var li = document.createElement("li");
    li.innerHTML = "<b>" + author + ": </b>";
    li.innerText += message;
    document.getElementById("messages").appendChild(li);
}

function sendMessage() {
    socket.emit("message",  {message: document.getElementById("message-input").value});
    document.getElementById("message-input").value = "";
}


document.addEventListener("DOMContentLoaded", () => {

    try {
        socket = io("https://danby.aniere.fr:3000");

        socket.on("update-count", (data) => {
            document.getElementById("value").innerText = data.value;
        });

        socket.on("username", (data) => {
            username = data.username;
        });

        socket.on("new-message", (data) => {
            addMessage(data.author, data.message);
        });


    } catch(error) {
        document.getElementById("value").innerText = "Serveur injoingnable !";
    }
    
});

const swiper = new Swiper('.swiper', {
    direction: "horizontal",
    loop: true,
    autoplay: true,
    speed: 400,
    spaceBetween: 100,
});


document.getElementById("chat-button").addEventListener("click", () => {
    document.getElementById("chat").style.display = "block";
});

document.getElementById("close").addEventListener("click", () => {
    document.getElementById("chat").style.display = "none";
});

document.getElementById("send").addEventListener("click", sendMessage);

document.getElementById("message-input").addEventListener("keyup", (event) => {

    if(event.key == "Enter") {
        sendMessage();
    }
});