import createDebug from "debug";
import { ClientHub, hub_connect } from "./hub.ts";
import { ConfigServer, loadConfig } from "./config.ts";
import "./css/style.css";
import "./css/themes/catppuccin-mocha/colors.css";
import { Part, Planet } from "./protocol.ts";
import * as PIXI from "pixi.js";

let config = await loadConfig();

const logger = createDebug("main");
logger(
  `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
);
/*
if (window.localStorage.getItem("stk-packet-mode") === "debug") {
  document.getElementById("packet_log")!.classList.remove("log-hidden");
} else {
  document.getElementById("packet_log")!.remove();
}

 */

export interface GlobalData {
  client: ClientHub | null;
  me: GlobalMe | null;

  players_map: Map<number, string>;
  inverse_players_map: Map<string, number>;

  planets_map: Map<number, Planet>;

  parts_map: Map<number, Part>;

  up: boolean;
  down: boolean;
  left: boolean;
  right: boolean;

  rendering: GlobalRendering | null;
}

export interface GlobalRendering {
  app: PIXI.Application;
  player_text_map: Map<number, PIXI.Text>;
  planet_sprite_map: Map<number, PIXI.Sprite>;
  part_sprite_map: Map<number, PIXI.Sprite>;
}

export interface GlobalMe {
  username: string;
  part_id: number;
}

export const global: GlobalData = {
  client: null,
  me: null,
  players_map: new Map(),
  inverse_players_map: new Map(),
  planets_map: new Map(),
  parts_map: new Map(),
  up: false,
  down: false,
  left: false,
  right: false,
  rendering: null,
};

export function player(): Part | undefined {
  if (global.me !== null) {
    return global.parts_map.get(global.me!.part_id);
  } else {
    return undefined;
  }
}

const version_string = `StarKingdoms Client ${APP_VERSION} (${COMMIT_HASH})`;
document.getElementById("footer-left")!.innerHTML = version_string;
document.getElementById("footer-right")!.innerHTML =
  `Made with <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="footer-icon"><path d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" /></svg> by the StarKingdoms team`;

// Dropdown stuff
const custom_select = document.querySelector(".fm-select")!;
const custom_select_btn = <HTMLButtonElement>(
  document.querySelector(".fm-select-button")!
);

custom_select_btn.onclick = (e) => {
  e.stopPropagation();
  e.preventDefault();
  custom_select.classList.toggle("active");
  custom_select_btn.setAttribute(
    "aria-expanded",
    custom_select_btn.getAttribute("aria-expanded") === "true"
      ? "false"
      : "true",
  );
};

const selected_value = document.querySelector(".fm-selected-value")!;

// Populate the main page server selector

let inverse_server_lookup: { [name: string]: string } = {};

const dropdown = document.getElementById("fm-select-dropdown")!;

dropdown.innerHTML = "";

for (let server_id in config.servers) {
  let server: ConfigServer = config.servers[server_id];
  if (
    server.isDevelopment &&
    window.localStorage.getItem("stk-mode") !== "debug"
  ) {
    continue;
  }
  let html_text = `
    <li>
        <input type="radio" id="${server_id}" name="server" autocomplete="off" ${
          server.isPrimary ? "checked" : ""
        } />
        <label for="${server_id}">${server.name}</label>
    </li>
    `;
  inverse_server_lookup[server.name] = server_id;
  dropdown.innerHTML += html_text;
  if (server.isPrimary) {
    selected_value.textContent = server.name;
  }
}

const options_list = document.querySelectorAll(".fm-select-dropdown li");
options_list.forEach((option) => {
  function handler(e: Event) {
    if (
      e.type === "click" &&
      (<PointerEvent>e).clientX !== 0 &&
      (<PointerEvent>e).clientY !== 0
    ) {
      // @ts-ignore
      selected_value.textContent = this.children[1].textContent;
      custom_select.classList.remove("active");
    }
    if (e.type === "keyup") {
      console.log((<KeyboardEvent>e).target!);
      // @ts-ignore
      selected_value.textContent = this.textContent;
      custom_select.classList.remove("active");
    }
    if (
      !config.servers[inverse_server_lookup[selected_value.textContent!]]
        .isProduction
    ) {
      document.getElementById("server-danger")!.classList.remove("hidden");
    } else {
      document.getElementById("server-danger")!.classList.add("hidden");
    }
  }
  // @ts-ignore
  option.onkeyup = handler;
  // @ts-ignore
  option.onclick = handler;
});

function setStatus(stat: string) {
  document.getElementById("launch-btn")!.textContent = stat;
}

document.getElementById("join-fm")!.onsubmit = async (e) => {
  e.preventDefault();

  setStatus("Connecting...");
  (<HTMLButtonElement>custom_select_btn).disabled = true;
  (<HTMLInputElement>document.getElementById("username")!).disabled = true;

  try {
    let server_name = selected_value.textContent!;
    let server_id = inverse_server_lookup[server_name];
    let server: ConfigServer = config.servers[server_id];

    let username = (<HTMLInputElement>document.getElementById("username")!)
      .value;

    logger(
      `connecting to ${server.clientHubUrl} as ${username} with auth = none`,
    );

    global.client = await hub_connect(server.clientHubUrl, username);
  } catch (e) {
    setStatus("Connection failed!");
    console.error(e);
    (<HTMLButtonElement>custom_select_btn).disabled = false;
    (<HTMLInputElement>document.getElementById("username")!).disabled = false;
  }
};