<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 Popup from "../components/ui/Popup.svelte";
  import Button from "../components/ui/Button.svelte";
  import TextInput from "../components/ui/TextInput.svelte";
  import PasswordInput from "../components/ui/PasswordInput.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: Signup.svelte");

  if (window.localStorage.getItem("stk-token") != null) {
    let token = window.localStorage.getItem("stk-token")!;
    let jwt = parseJwt(token);
    if (jwt !== undefined) {
      window.location.href = "/";
    }
  }

  let username = "";
  let password = "";

  let error: string | null = null;

  async function signup() {
    try {
      let resp = await fetch(`${config.backplaneBaseUrl}/signup`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username: username,
          password: password,
        }),
      });

      let body = await resp.json();

      if (!resp.ok) {
        let r_error = body.errors[0];

        if (
          r_error.code === "ERR_INTERNAL_ERROR" &&
          r_error.message.startsWith("duplicate key value")
        ) {
          error = "Username already taken :(";
        } else {
          error = JSON.stringify(body);
        }

        return;
      }

      window.location.href = "/login/";
    } catch (e: any) {
      error = e.toString();
    }
  }
</script>

<Popup title="Sign up" centered style="max-width: 300px;" id="title-popup">
  <form id="join-fm" class="form" on:submit|preventDefault={signup}>
    <label for="username" class="label">Username</label>
    <TextInput
      style="width: 100%; max-width: 100%;"
      bind:value={username}
      id="username"
      required
      autocomplete="off" />

    <label for="password" class="label">Password</label>
    <PasswordInput
      style="width: 100%; max-width: 100%;"
      bind:value={password}
      id="password"
      required
      autocomplete="off" />

    <Button style="width: 100%; max-width: 100%;">Sign up!</Button>

    {#if error !== null}
      <span class="account-info" style="color: var(--error)">
        {error}
      </span>
    {/if}

    <span class="account-info">
      Already have an account? <a href="/login/">Log in!</a>
      Changed your mind?
      <a href="/">Back to the launchpad</a>
    </span>
  </form>
</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>