<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;
    }
  }

  /* I'm sorry for this code lmao */
  export function chatViewToggle() {
    let el = document.getElementById("chat-minimax")!;
    let chat_modal = document.getElementById("chat")!;
    console.log("clickl");
    let to_hide = [
      document.getElementById("chatbox")!,
      document.getElementById("chatentry")!,
    ];
    if (el.hasAttribute("minimised")) {
      chat_modal.style.width = "";
      chat_modal.style.paddingRight = "";
      for (let element of to_hide) {
        element.style.display = "";
      }
    } else {
      chat_modal.style.width = "unset";
      chat_modal.style.paddingRight =
        "4em"; /* magical number. don't touch >:( */
      for (let element of to_hide) {
        element.style.display = "none";
      }
    }

    /* inject that live svg hell yeah */
    if (el.hasAttribute("minimised")) {
      el.removeAttribute("minimised");
      el.innerHTML = `<svg height=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 0.52916663" width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1></defs><g id=layer1 transform=translate(0,-1.8520833)><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833></rect></g></svg>`;
    } else {
      el.setAttribute("minimised", "");
      el.innerHTML = `<svg height=16 width=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 4.233333" xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1 /><g id=layer1><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833 /><rect height=0.52916664 id=rect1-5 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=-4.2333331 y=1.8520833 transform=rotate(-90) /></g></svg>`;
    }
  }
</script>

<Popup draggable title="Chat" class="chat-container" id="chat">
  <div class="chat-minimax" id="chat-minimax">
    <svg
      width="16"
      height="2"
      viewBox="0 0 4.2333332 0.52916663"
      version="1.1"
      id="svg1"
      style="position: absolute; top: 14px; left: 7px"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:svg="http://www.w3.org/2000/svg">
      <defs id="defs1" />
      <g id="layer1" transform="translate(0,-1.8520833)">
        <rect
          style="fill: #f9f9f9; stroke-width: 0"
          id="rect1"
          width="4.2333331"
          height="0.52916664"
          x="0"
          y="1.8520833" />
      </g>
    </svg>
  </div>
  <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>