import {setGameInfo} from "./moooove";
import {clearBoard, resizeBoard} from "./Board";

type CrashGroup = {
    name: string;
    passed: number;
    status: string;
    total: number;
};

type CommandOpts = {
    continue: boolean;
    record_on: string;
    timeout: number;
};

type CrashCommand = {
    cause: string;
    cmd: string[];
    code: number;
    key: string[];
    opts: CommandOpts;
    status: string;
    stderr: string;
    stdout: string;
};

type CrashReport = {
    commands: CrashCommand[];
    groups: CrashGroup[];
    player_1: string;
    player_2: string;
};

type Move = {
    x: number;
    y: number;
    id: number;
    tile: { t: number[], c: number[], name: string, angle: string };

};

type Game = {
    seed: number;
    type: string;
    player0: string;
    player1: string;
    queens0: number[];
    queens1: number[];
    moves: Move[];
    winner?: string;
    cause?: string;
    crashReport?: CrashReport;
};

function invertBorder() {
    showBorders(bordersShown);
    bordersShown = !bordersShown;
    switchMessage(<HTMLElement>document.getElementById("showTeams"), "les équipes");
}

let games: Game[] = [];

function main() {
    games = JSON.parse(document.getElementById("jsonData")!.textContent!) as Game[];
    const crashes = JSON.parse(document.getElementById("errors")!.textContent!) as (CrashReport & { log: Game; })[];
    const timeouts: CrashReport[] = [];
    crashes.forEach((c) => {
        const {log: gameLog, ...crashReportWithoutGame} = c;
        if (typeof (gameLog as unknown) === "string") { // Timeout case...
            timeouts.push(crashReportWithoutGame);
            return;
        }
        gameLog.crashReport = crashReportWithoutGame;
        games.push(gameLog);
    });
    console.log(games);
    console.log(timeouts);
    console.log(crashes);
}

function switchMessage(elm: HTMLElement, txt: string) {

    if (elm.innerText.includes("Afficher"))
        elm.innerText = "Cacher " + txt;
    else
        elm.innerText = "Afficher " + txt;
}

function changeDisplayed(className: string) {

}

function showBorders(visible: boolean) {
    function f(name: string) {
        const elms = document.getElementsByClassName(name);
        const elmsp = document.getElementsByClassName(name + "-hidden");

        function g(elms1: any) {
            for (let i = elms1.length; i > 0; i--) { // this loop must be reverted as getElementsByClassName identify elements via CSSselector (?) and it does change during the loop
                const elm = <HTMLElement>(elms1[i - 1]);
                if (visible) {
                    elm.classList.remove(name);
                    elm.classList.add(name + "-hidden");
                } else {

                    elm.classList.remove(name + "-hidden");
                    elm.classList.add(name);
                }
            }
        }

        g(elms);
        g(elmsp);
    }

    f("player1");
    f("player0");
    f("player-1");
}


let IsImgsDisplayed = true;

function switchToGraph() {
    console.log("switching to " + (IsImgsDisplayed ? "GRAPH" : "IMAGES") + " vue");
    IsImgsDisplayed = !IsImgsDisplayed;

    const imgElms = document.getElementsByClassName("tileImg");
    for (let i = 0; i < imgElms.length; i++) {
        const elm = <HTMLElement>(imgElms[i]);
        if (IsImgsDisplayed)
            elm.classList.remove("hidden");
        else
            elm.classList.add("hidden");
    }
    const tileElms = document.getElementsByClassName("subTile");
    for (let i = 0; i < tileElms.length; i++) {
        const elm = <HTMLElement>(tileElms[i]);
        if (!IsImgsDisplayed)
            elm.classList.remove("hidden");
        else
            elm.classList.add("hidden");
    }

}

let bordersShown = false;
const showDataButton = (<HTMLElement>document.getElementById('showData'));
showDataButton.addEventListener(
    'click',
    () => {
        (<HTMLElement>document.getElementById('jsonData')).classList.toggle("closed");
        switchMessage(showDataButton, "les données de parties");
    });
const showImgsButton = <HTMLElement>document.getElementById("showImages");
showImgsButton.addEventListener("click", () => {
        switchToGraph();
        switchMessage(showImgsButton, "le graphe");
    }
);
const showTeamsButton = <HTMLElement>document.getElementById("showTeams");
showTeamsButton.addEventListener("click", () => {
        invertBorder();
    }
);

window.onload = ((e) => {
    main();
    clearBoard();
    setGameInfo();
    resizeBoard();
    // src: https://stackoverflow.com/a/8916697
    window.addEventListener("keydown", function (e) {
        if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) {
            e.preventDefault();
        }
    }, false);
});

export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown, invertBorder};