const socket = io();

let channel = "global";

const chatBox = document.getElementById("chat-messages");

let history = {
  global: [],
  guild: [],
  private: [],
};

function updateChat() {
  chatBox.value = history[channel].join("\n");

  chatBox.scrollTop = chatBox.scrollHeight;
}

document.querySelectorAll(".chat-channels button").forEach((btn) => {
  btn.onclick = () => {
    document
      .querySelectorAll(".chat-channels button")
      .forEach((b) => b.classList.remove("active"));

    btn.classList.add("active");

    channel = btn.dataset.channel;

    updateChat();
  };
});

document.getElementById("chat-send").onclick = () => {
  const text = document.getElementById("chat-text").value;

  if (!text) return;

  socket.emit("chatMessage", {
    channel: channel,
    message: text,
  });

  document.getElementById("chat-text").value = "";
};

socket.on("chatMessage", (data) => {
  const line = `${data.user}: ${data.message}`;

  history[data.channel].push(line);

  if (history[data.channel].length > 50) history[data.channel].shift();

  if (data.channel === channel) updateChat();
});