const order = document.getElementById("graphOrder");
const test_bttn = document.getElementById("test_bttn");
const optionsScreen = document.getElementById("optionsScreen");
const gameScreen = document.getElementById("gameScreen");
const gameContainer = document.getElementById("game");
const computer = document.getElementById('computer');

document.getElementById('new-game').addEventListener('click', toggle_screen);

const base_url = "https://jpappel.xyz/toggle/game"

const testGame = {
    size: 7,
    finished: false,
    board: Array(7).fill(true),
    turn: 0,
    version: "0.0.0",
    human_turn: false,
    winner: ""
}

function createGame(length){
    const game = {
        size: length,
        finished: false,
        board: Array(length).fill(true),
        turn: 0,
        version: "0.0.0",
        human_turn: false,
        winner: ""
    }
    const verticies = []
    gameContainer.innerText = ""

    game.board.forEach(() => {
        let vertex = document.createElement("div");
        vertex.classList.add('vertex');
        vertex.addEventListener('click', toggleVert );

        gameContainer.appendChild(vertex);
        verticies.push(vertex);
    });
    return [game, verticies];
}

function getGame(length){
    return fetch(`${base_url}/new?size=${length}`, {
        method: "GET"
    });
}

function toggle_screen(){
    optionsScreen.classList.toggle('inactive');
    gameScreen.classList.toggle('inactive');
}

function switchVert(vertex){
    vertex.classList.toggle("off");
    if(vertex.classList.contains("off"))
        vertex.removeEventListener('click', toggleVert);
    else
        vertex.addEventListener('click', toggleVert);
}

function toggleVert(e){
    const vertex = e.target;
    const prev = vertex.previousSibling;
    const next = vertex.nextSibling;

    vertex.classList.add("off")
    vertex.removeEventListener('click', toggleVert);
    if(prev) switchVert(prev);
    if(next) switchVert(next);

    gameContainer.dispatchEvent(new Event("vertToggle"))
}

function renderGame(game, vertices){
    //synchronizes vertices in dom with game object
    game.board.forEach((on, index) => {
        let vertex = verticies[index];
        if(on){
            vertex.classList.remove('off');
            vertex.addEventListener('click', toggleVert);
        }
        else {
            vertex.classList.add('off');
            vertex.removeEventListener('click', toggleVert);
        }
    });
    setUntoggleable(vertices);
}

function updateGame(game, vertices){
    //synchronizes game object with vertices from dom
    setUntoggleable(vertices);
    vertices.forEach((vertex, index) => {
        game.board[index] = !vertex.classList.contains('off');
    });
}

function displayMessage(text){

}

function setUntoggleable(vertices){
    vertices.forEach((vertex) => {
        const prev = vertex.previousSibling;
        const next = vertex.nextSibling;
        let heat = 0

        if(prev){
            heat += (prev.classList.contains('off')) ? 0 : 1 ;
        }
        if(next){
            heat += (next.classList.contains('off')) ? 0 : 1 ;
        }
        if(heat <= 0){
            vertex.classList.add('untoggleable');
            vertex.removeEventListener('click', toggleVert);
        }
    });
}

async function sendGame(game){
    let response = await fetch(`${base_url}/play`, {
        method: "POST",
        body: JSON.stringify(game),
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        }
    })
    gameContainer.dispatchEvent(new Event("recieveGame"));
    return response.json()
}

function startGame(){
    const length = order.valueAsNumber;
    const playComputer = computer.checked;
    const [game, vertices] = createGame(length);
    if(playComputer)
        game = sendGame(game);
    toggle_screen();
    gameContainer.addEventListener("vertToggle", () => {
        updateGame(game, vertices);
        if(playComputer)
            game = sendGame(game);
    });
    gameContainer.addEventListener("recieveGame", () => {
        renderGame(game, vertices);
    });
    //while(!game.finished){
    //    humanPlay(game)
    //   // game.nextTurn(game.turn);
    //}
    // displayMessage(game.result);
}