import { ConfigServer, loadConfig } from "../../config.ts";
import createDebug from "debug";
import "../../css/themes/catppuccin-mocha.scss";
import "../../css/style.scss";
import { parseJwt } from "../../jwt.ts";

// HMR wrapper, to prevent doing reinit twice
let initialized: boolean | undefined;

async function init() {
  let config = await loadConfig();

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

  initialized = true;

  const account_info = document.getElementById("account-info")!;

  if (window.localStorage.getItem("stk-token") != null) {
    let token = window.localStorage.getItem("stk-token")!;
    let token_parsed: any = parseJwt(token);
    account_info.innerText = `Logged in as ${token_parsed.username}! Saves will be stored on the server.`;
  }

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

  document.getElementById("footer-left")!.innerHTML =
    `StarKingdoms Client ${APP_VERSION} (${COMMIT_HASH})`;

  // fill in the select box
  const select_box = <HTMLSelectElement>document.getElementById("select")!;
  const username_box = <HTMLInputElement>document.getElementById("username")!;
  const nonprod_warning = document.getElementById("server-danger")!;

  const form = <HTMLFormElement>document.getElementById("join-fm")!;
  form.onsubmit = (e) => {
    e.preventDefault();
    window.location.href = `/play/?srv=${select_box.value}&username=${username_box.value}`;
  };

  select_box.innerHTML = "";

  select_box.onchange = () => {
    if (
      config.servers[select_box.value] !== undefined &&
      !config.servers[select_box.value].isProduction
    ) {
      nonprod_warning.classList.remove("hidden");
    } else {
      nonprod_warning.classList.add("hidden");
    }
  };

  for (let server_id in config.servers) {
    let server: ConfigServer = config.servers[server_id];

    if (server.isDevelopment && !is_development) continue;

    let new_option = document.createElement("option");
    new_option.value = server_id;
    new_option.innerText = server.name;

    select_box.appendChild(new_option);

    if (server.isPrimary) {
      select_box.value = server_id;
    }
  }
}

if (initialized === undefined) {
  init();
}