import {resetVar, resideBoardScreenSize} from "./moooove";

/**
 * return the WebBoard information
 */
function getWebBoardInfo() {

    const gameGrid = document.getElementById("board");
    const topDiv = document.getElementById("line0");
    if (!gameGrid || !topDiv)
        throw Error("The game grid is not initialized. Can't proceed");

    const nbColumn: number = topDiv.childElementCount;
    const nbLines: number = gameGrid.childElementCount;
    return {gameGrid, topDiv, nbLines, nbColumns: nbColumn};
}

/**
 * set the size of each div to have them fill the entire screen
 */
function resizeBoard(staySquare: boolean = true) {

    const gameInfo = getWebBoardInfo();
    const maxHeight = window.innerHeight / 100 * 80;
    const maxWidth = window.innerWidth / 100 * 80;
    const maxPercent = Math.min(maxWidth / gameInfo.nbColumns, maxHeight / gameInfo.nbLines);

    for (let i = 0; i < gameInfo.nbLines; i++) {
        const line = document.getElementById("line" + i);
        if (!line)
            throw Error("Error while resizing the board, the line " + i + "does not exist");
        line.style.height = staySquare ? maxPercent + "px" : 100 / gameInfo.nbLines + "%";
        line.style.width = "100%";

    }

    for (let j = 0; j < gameInfo.nbColumns; j++) {
        const tiles = document.getElementsByClassName("tile" + j);
        if (!tiles || tiles.length === 0)
            throw Error("Can't find any tile with class tile" + j);
        for (let k = 0; k < tiles.length; k++) {
            const elm = tiles[k] as HTMLElement;
            elm.style.width = staySquare ? maxPercent + "px" : "100%";
            elm.style.height = "100%";
        }
    }
}

/**
 * create a div where district could be placed
 * @param id
 * @param lineMode default size to have a smooth animation
 */
function createDiv(id: number, lineMode: number) {
    const newDiv = document.createElement("div");
    if (lineMode === 1) {
        newDiv.style.height = "0";
        newDiv.style.width = '100%';
    } else if (lineMode === 0) {
        newDiv.style.height = "100%";
        newDiv.style.width = "0";
    } else { // for the initial tile
        newDiv.style.height = "100%";
        newDiv.style.width = "100%";
    }
    newDiv.className = "gridTile tile" + id;
    for (let j = 0; j < 5; j++) {
        const line = document.createElement("div");
        line.className = "subLine";
        for (let i = 0; i < 5; i++) {
            const elm = document.createElement('div');
            elm.className = "subTile";
            line.append(elm);
        }
        newDiv.append(line);
    }

    return newDiv;

}

/**
 * create a new line of divs
 * @param id the lineID.
 * @param nbColumn the number of divs that will be added to the line
 */
function createRow(id: number, nbColumn: number) {

    const newLine = document.createElement("div");
    newLine.id = "line" + id;
    newLine.className = "gridLine";
    newLine.style.width = "100%";
    newLine.style.height = "0";

    for (let i = 0; i < nbColumn; i++) {
        newLine.append(createDiv(i, 1));
    }
    return newLine;
}

/**
 * Add a new line at the top or
 */
function addRowAbove() {

    const gameInfo = getWebBoardInfo();
    // move existing row down
    for (let i = gameInfo.nbLines - 1; i >= 0; i--) {
        const l = document.getElementById("line" + i);
        if (!l)
            throw Error("The game grid is not initialized. Can't proceed");
        l.id = "line" + (i + 1);
    }

    const newLine = createRow(0, gameInfo.nbColumns);

    gameInfo.gameGrid.prepend(newLine);
    setTimeout(resizeBoard, 10);
}

function addRowUnder() {

    const gameInfo = getWebBoardInfo();

    const newLine = createRow(gameInfo.nbLines, gameInfo.nbColumns);
    gameInfo.gameGrid.appendChild(newLine);
    setTimeout(resizeBoard, 10);
}

/**
 * add a column at the right or let
 */
function addColumnLeft() {
    const gameInfo = getWebBoardInfo();

    for (let j = gameInfo.nbColumns - 1; j >= 0; j--) {

        const tiles = document.getElementsByClassName("tile" + j);
        if (!tiles)
            throw Error("Can't find the tile");
        for (let k = 0; k < tiles.length; k++) {
            const elm = tiles[k] as HTMLElement;
            elm.className = "gridTile tile" + (j + 1);
        }
    }

    for (let i = 0; i < gameInfo.nbLines; i++) {
        document.getElementById("line" + i)?.prepend(createDiv(0, 0));
    }

    setTimeout(resizeBoard, 10);
}

function addColumnRight() {
    const gameInfo = getWebBoardInfo();

    for (let i = 0; i < gameInfo.nbLines; i++) {
        document.getElementById("line" + i)?.append(createDiv(gameInfo.nbColumns, 0));
    }
    setTimeout(resizeBoard, 10);
}


/**
 *  reset the WebBoard
 */
function clearBoard() {
    const grid = document.getElementById("board");
    if (!grid)
        throw Error("error");
    grid.innerHTML = "";
    const line0 = document.createElement('div');
    line0.className = "gridLine";
    line0.id = "line0";
    line0.append(createDiv(0, 2));

    grid.append(line0);
    resizeBoard();
    resetVar();
    resideBoardScreenSize();

}

export {
    addColumnRight, addColumnLeft, addRowUnder, addRowAbove, resizeBoard, clearBoard, getWebBoardInfo
};