<script lang="ts">
  import Popup from "./ui/Popup.svelte";

  export function addMessage(classname: string, message: string) {
    let chatbox = document.getElementById("chatbox")!;
    let should_scroll =
      chatbox!.scrollTop == chatbox!.scrollHeight - chatbox!.offsetHeight;
    let p = document.createElement("p");
    p.innerText = message;
    p.classList.add("message");
    p.classList.add(classname);
    if (chatbox.children.length > 128) {
      chatbox.children[0]!.remove();
    }
    chatbox!.appendChild(p);
    if (should_scroll) {
      chatbox!.scrollTop = chatbox!.scrollHeight;
    }
  }
</script>

<Popup draggable minimizable title="Chat" class="chat-container" id="chat">
  <div id="chatbox" class="chat-table mono">
    <!-- Filled by script -->
  </div>
  <input
    placeholder="Enter message or command here..."
    class="chat-box"
    id="chatentry"
    required
    autocomplete="off" />
</Popup>