(($) => {
  const isSecure = location.protocol === "https:";
  var ws = new WebSocket(
    `ws${isSecure ? "s" : ""}://${location.host}/ws`,
  );
  const input = $("#message");
  const button = $("#button");
  const messages = $("#messages");
  const chatMain = $(".chat-main");
  var lastMessage;

  // Function to scroll to bottom of chat
  const scrollToBottom = () => {
    chatMain.scrollTop(chatMain[0].scrollHeight);
  };

  $("#button").on("click", () => {
    const message = input.val();

    if (message) {
      // Disable input and button while waiting for response
      input.prop("disabled", true);
      button.prop("disabled", true);

      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("");
      scrollToBottom();
    }
  });

  input.on("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      $("#button").click();
    }
  });

  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()));
      // Re-enable input and button when response is complete
      input.prop("disabled", false);
      button.prop("disabled", false);
      input.focus();
      scrollToBottom();
    } else {
      lastMessage.append(content);
      scrollToBottom();
    }
  };
})(jQuery);