(($) => {
  var ws = new WebSocket(
    `ws://${location.protocol + "//" + location.host}${location.port ? ":" + location.port : ""}/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);