type Message = {
  text: string;
  user: string;
  color: string;
};
const url = "http://localhost:5000/";
const input = document.getElementById("msg") as HTMLInputElement;
let username: string;
let color: string;
color = "#123456";
// @ts-ignore
const chatListScroll = $("#chatlist").tinyscrollbar();
function init() {
  const username = prompt("Gimme your name: ");
  if (username === null) {
    document.body.innerHTML = "You should give me your name!";
    return;
  }
  // @ts-ignore
  // chatList.tinyscrollbar();
  //   //@ts-ignore
  //   $("#emot").emoticonize();
  if (input === null) return;
  input.onclick = sendMessage;
  poll();
}
function poll() {
  $.ajax({
    url: url + "poll",
    success: addMessage /* data => {
      console.log(data); // { text: "Some data" } -> will be printed in your browser console every 5 seconds
      poll();
    } */,
    error: () => setTimeout(() => poll(), 1000),
    timeout: 30000, // 30 seconds
  });
}
function sendMessage() {
  const msg = {
    text: input.value,
    user: username,
    color: color,
  };
  fetch(url + "send", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(msg),
  });
}
function addMessage(msg: Message) {
  const board = $(".overview")[0];
  const div = document.createElement("div");
  div.innerHTML = JSON.stringify(msg);
  board.appendChild(div);
  console.log(msg);
  // @ts-ignore
  $(chatListScroll).data().plugin_tinyscrollbar.update("relative");
  // $(chatListScroll).data().plugin_tinyscrollbar.update("bottom");
  poll();
}
init();