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

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 GlobalMe {
    username: string,
    part_id: number
}
export interface GlobalRendering {
    canvas: HTMLCanvasElement,
    ctx: CanvasRenderingContext2D
}

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