import CONFIG from "./config.json";
import createDebug from "debug";
import {gateway_connect, GatewayClient} from "./gateway.ts";

const logger = createDebug("main");
logger(`Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service`);

export interface GlobalData {
    client: GatewayClient | null
}

export const global: GlobalData = {
    client: null
}

const version_string = `StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) 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`;
document.getElementById("footer")!.innerHTML = version_string;

// Dropdown stuff
const custom_select = document.querySelector(".fm-select")!;
const custom_select_btn = document.querySelector(".fm-select-button")!;
custom_select_btn.addEventListener("click", (e) => {
    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
interface ConfigServer {
    name: string;
    url: string;
    api: string;
}

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

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

for (let server_id in CONFIG.servers) {
    // @ts-ignore not sure why this complains
    let server: ConfigServer = CONFIG.servers[server_id];
    let is_first = Object.keys(inverse_server_lookup).length == 0;
    let html_text = `
    <li>
        <input type="radio" id="${server_id}" name="server" autocomplete="off" ${is_first ? "checked" : ""} />
        <label for="${server_id}">${server.name}</label>
    </li>
    `;
    inverse_server_lookup[server.name] = server_id;
    dropdown.innerHTML += html_text;
    if (is_first) {
        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");
        }
    }
    option.addEventListener("keyup", handler);
    option.addEventListener("click", handler);
});

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

document.getElementById("join-fm")!.addEventListener("submit", 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];
        // @ts-ignore
        let server: ConfigServer = CONFIG.servers[server_id];

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

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

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