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

  import createDebug from "debug";
  import { hub_connect, sendPacket } 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";
  import { global } from "../globals.ts";
  import { PacketType } from "../protocol.ts";
  import * as PIXI from "pixi.js";
  import Button from "../components/ui/Button.svelte";

  let config = DEFAULT_CONFIG;

  let velocity;
  let x_pos;
  let y_pos;
  let energy;

  //let antialiasing: boolean = false;

  let chatbox: Chatbox;

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

  /*function toggleAntialiasing() {
    global.rendering!.app.renderer.reset();
    PIXI.settings.RENDER_OPTIONS.antialias = antialiasing;
    logger("Antialiasing is now", antialiasing ? "on" : "off");
  }*/

  function handlewheel(e: WheelEvent) {
    let delta = e.shiftKey ? 0.01 : 0.1;
    if (e.deltaY < 0) {
      global.scale += delta;
    } else {
      global.scale -= delta;
    }
    if (global.scale > 5) {
      global.scale = 5;
    } else if (global.scale < 0.05) {
      global.scale = 0.05;
    }
  }

  function beam_out() {
    if (!global.saveEligible) {
      chatbox.addMessage(
        "server-message",
        "[Save] Not eligible to beam out, please get closer to a planet",
      );
      return;
    }
    let req_packet: Packet = {
      t: PacketType.RequestSave,
      c: {
        old_save: window.localStorage.getItem("save"),
      },
    };
    sendPacket(global.client!, req_packet);
    global.leaving = true;
  }

  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 = Number.parseInt(params.get("srv")!);
    let username = params.get("username")!;

    if (!config.environments[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.environments[server_id];

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

<div class="game" id="gamewindow" on:wheel={handlewheel}></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></th>
          <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="leave">
            <Button on:click={beam_out}>Beam out</Button>
          </td>
          <td id="pos">
            <span id="pos-val-x" bind:this={x_pos}>--</span>
            ,
            <span id="pos-val-y" bind:this={y_pos}>--</span>
          </td>
          <td id="velocity">
            <span id="velocity-val" bind:this={velocity}>--</span>
          </td>
          <td id="track">
            <span id="track-val">--</span>
          </td>
        </tr>
        <tr>
          <td></td>
          <td class="hud-d"><strong>Energy:</strong></td>
          <td
            colspan="2"
            id="energy-bg"
            style="height:100%;width:100%;padding:0;box-sizing:border-box;border: 0.125em solid rgb(var(--text));border-radius: 0.5em;overflow:hidden;">
            <div
              id="energy"
              style="height:22px;background-color:#Af8f4f;"
              bind:this={energy}>
            </div>
          </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>