<script lang="ts">
  import HeartIcon from "../icons/HeartIcon.svelte";

  import createDebug from "debug";
  import { hub_connect } from "../hub.ts";
  import "../css/style.scss";
  import "../css/themes/catppuccin-mocha.scss";
  import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
  import Chatbox from "../components/Chatbox.svelte";
  import { onMount } from "svelte";
  import Popup from "../components/ui/Popup.svelte";
  import Checkbox from "../components/ui/Checkbox.svelte";

  let config = DEFAULT_CONFIG;

  let chatbox: Chatbox;

  const logger = createDebug("main");
  logger(
    `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
  );
  logger("Current view: /play");

  onMount(async () => {
    config = await loadConfig();

    chatbox.addMessage("server-message", "Connecting to the game server...");

    let params = new URLSearchParams(window.location.search);

    if (!params.has("srv")) {
      chatbox.addMessage(
        "server-error",
        "Server ID missing. Redirecting to main menu in 5 seconds.",
      );
      setTimeout(() => {
        window.location.href = "/";
      }, 5000);
      return;
    }
    if (!params.has("username")) {
      chatbox.addMessage(
        "server-error",
        "Username missing. Redirecting to main menu in 5 seconds.",
      );
      setTimeout(() => {
        window.location.href = "/";
      }, 5000);
      return;
    }
    let server_id = params.get("srv")!;
    let username = params.get("username")!;

    if (!Object.keys(config.servers).includes(server_id)) {
      chatbox.addMessage(
        "server-error",
        "The selected server is currently unavailable. Redirecting to main menu in 5 seconds.",
      );
      setTimeout(() => {
        window.location.href = "/";
      }, 5000);
      return;
    }

    let server = config.servers[server_id];

    await hub_connect(server.clientHubUrl, username, chatbox);
  });
</script>

<div class="game" id="gamewindow"></div>

<Popup
  draggable
  title="Packet Log"
  style="max-width: 300px; width: min-content;"
  class="log-hidden log-container"
  id="packet-log">
  <table class="log">
    <thead>
      <tr class="log-wfull">
        <th class="log-wfull log-lalign log-header log-w50">#</th>
        <th class="log-wfull log-lalign log-header">Dir</th>
        <th class="log-wfull log-lalign log-header log-w240">Type</th>
        <th class="log-wfull log-lalign log-header">Delta</th>
      </tr>
    </thead>
    <tbody id="log_body"></tbody>
  </table>
  <hr />
  <h1>Packet Explorer</h1>
  <p id="explorer_selected" class="mono">Selected: --</p>
  <table class="mono json" id="explorer_json"></table>
</Popup>

<Chatbox bind:this={chatbox} />

<div class="options">
  <Popup
    title="Options"
    id="options"
    draggable
    minimizable
    style="width: 20vw; position: absolute;">
    <label for="dev_mode">Developer mode (Advanced)</label>
    <Checkbox
      title="Enables tools intended only for the developers. Buggy. Use at your own risk." />
  </Popup>
</div>

<div class="hud" id="hud">
  <Popup notitle title="" id="hud-content-wrapper">
    <table>
      <thead>
        <tr>
          <th class="hud-d">Position</th>
          <th class="hud-d">Velocity</th>
          <th class="hud-d">Track Angle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="pos">
            <span id="pos-val-x">--</span>
            ,
            <span id="pos-val-y">--</span>
          </td>
          <td id="velocity">
            <span id="velocity-val">--</span>
          </td>
          <td id="track">
            <span id="track-val">--</span>
          </td>
        </tr>
      </tbody>
    </table>
  </Popup>
</div>

<span class="footer-left">
  StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})
</span>
<span class="footer-right">
  Made with <HeartIcon class="footer-icon" /> by the StarKingdoms team
</span>