<script lang="ts">
  import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
  import createDebug from "debug";
  import "../css/themes/catppuccin-mocha.scss";
  import "../css/style.scss";
  import { parseJwt } from "../jwt.ts";
  import HeartIcon from "../icons/HeartIcon.svelte";
  import WarningIcon from "../icons/WarningIcon.svelte";
  import Popup from "../components/ui/Popup.svelte";
  import Button from "../components/ui/Button.svelte";
  import TextInput from "../components/ui/TextInput.svelte";
  import ColumnTable from "../components/ui/ColumnTable.svelte";
  import Column from "../components/ui/Column.svelte";
  import VerticalRule from "../components/ui/VerticalRule.svelte";
  import HorizontalGap from "../components/ui/HorizontalGap.svelte";

  let config = DEFAULT_CONFIG;
  // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
  (async () => {
    config = await loadConfig();
  })();

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

  let is_logged_in = false;
  let token_username = undefined;

  if (window.localStorage.getItem("stk-token") != null) {
    let token = window.localStorage.getItem("stk-token")!;
    let token_parsed: any = parseJwt(token);
    if (token_parsed !== undefined) {
      is_logged_in = true;
      token_username = token_parsed.username;
    }
  }

  const is_development = window.localStorage.getItem("stk-mode") === "debug";

  let nonprod_warning: HTMLSpanElement;

  let server: number = 0;
  let username = "";

  function playGame() {
    window.location.href = `/play/?srv=${server}&username=${username}`;
  }

  function updateNonprodWarning() {
    if (
      config.environments[server] !== undefined &&
      !config.environments[server].isProduction
    ) {
      nonprod_warning.classList.remove("hidden");
    } else {
      nonprod_warning.classList.add("hidden");
    }
  }
</script>

<Popup title="StarKingdoms" centered id="title-popup" style="max-width: 800px;">
  <ColumnTable>
    <Column>
      <h2>About</h2>
      StarKingdoms is a browser game about floating through space.
    </Column>
    <VerticalRule />
    <Column>
      <h2>Join Game</h2>

      <form id="join-fm" class="form" on:submit|preventDefault={playGame}>
        <label for="username" class="label">Username</label>
        <TextInput
          style="width: 100%; max-width: 100%;"
          bind:value={username}
          id="username"
          required
          autocomplete="off" />

        <label class="label" for="select">Server</label>
        <select
          bind:value={server}
          on:change={updateNonprodWarning}
          id="select"
          class="select"
          autocomplete="off"
          required>
          <option disabled value="">
            <em>Choose a server..</em>
          </option>
          {#each config.environments as env, i}
            {#if !(env.isDevelopment && !is_development)}
              <option value={i}>{env.name}</option>
            {/if}
          {/each}
        </select>

        <Button style="width: 100%; max-width: 100%;">Launch!</Button>
      </form>
    </Column>
    <VerticalRule />
    <Column>
      <h2>Tools & Options</h2>
      <Button style="width: 100%;" disabled>Options (soon!)</Button>
      <HorizontalGap />
      {#if window.localStorage.getItem("save") !== null}
        <a href="/shipeditor/" style="color: var(--text)">
          <Button style="width: 100%;">Ship Editor</Button>
        </a>
      {/if}
    </Column>
  </ColumnTable>
  <div>
    <span bind:this={nonprod_warning} class="server-danger hidden">
      <WarningIcon class="server-danger-icon" />
      Here be dragons! You have a
      <b>prerelease server</b>
      selected. Expect bugs, and save data on this server may be wiped at any time.
    </span>

    <span id="account-info" class="account-info">
      {#if is_logged_in}
        Logged in as {token_username}! Saves will be stored in your browser
        during the alpha, but will be stored on the server soon!
        <!-- TODO: Make this not a <a> (messing with styles) -->
        <a
          href="#"
          on:click={() => {
            window.localStorage.removeItem("stk-token");
            window.location.reload();
          }}>
          Logout
        </a>
      {:else}
        You are not logged in. Save data will be stored in your browser cache. <a
          href="/login/">
          Log in
        </a>
        to save your data on the server and sync it between devices.
      {/if}
    </span>
  </div>
</Popup>

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