const playField = document.getElementById("playfield");
const piecesArea = document.getElementById("pieces-area");
player = "white";
selectedPiece = null;
moveContinuation = false;

function movePiece(piece, x, y){
    
    const tile = document.getElementById("tile" + x + y);

    const offsetPosition = piecesArea.getBoundingClientRect();
    const position = tile.getBoundingClientRect();
    
    const top = position.top - offsetPosition.top;
    const left = position.left - offsetPosition.left; 
    
    piece.style.top = top + "px";
    piece.style.left = left + "px";

    piece.setAttribute("x", x);
    piece.setAttribute("y", y);
}

function generatePlayField(){

    

    for (let i = 0; i < 8; i++) {

        row = document.createElement("div");
        
        row.classList.add("row");
        
        row.id = "row" + i;

        for (let j = 0; j < 8; j++) {
            tile = document.createElement("div");
            
            tile.classList.add("tile");
            tile.id = "tile" + i + j;
            tile.setAttribute("x", i);
            tile.setAttribute("y", j);
            
            row.appendChild(tile);

            tile.addEventListener("click", tileClickEvent.bind(null,i,j));


            
        }

        playField.appendChild(row);
        
    }


}

function generatePieces(){
    pieceList.forEach(pieceRecord => {
        piece = document.createElement("div");

        piece.classList.add(pieceRecord.player);
        piece.classList.add(pieceRecord.type);
        
        piece.setAttribute("x", pieceRecord.x);
        piece.setAttribute("y", pieceRecord.y);

        piece.id = "piece" + pieceRecord.id;
        
        piecesArea.appendChild(piece);
        
        movePiece(piece, pieceRecord.x, pieceRecord.y)
        
        
        piece.addEventListener("click", pieceClickEvent.bind("null", piece))
        
    });
}

function getPieceRecordFromPiece(piece) {
    return getPieceRecord(piece.getAttribute("x"), piece.getAttribute("y"));
}

function updatePieces() {
    
    const safeList = new Array();
    
    pieceList.forEach(pieceRecord => {
        
        const piece = document.getElementById("piece" + pieceRecord.id);
        const classList = piece.classList;
        

        

                
        classList.remove("basic");
        classList.remove("queen");
        classList.add(pieceRecord.type);
            
        

        safeList.push(piece.id);
        movePiece(piece, pieceRecord.x, pieceRecord.y);

        if (missedOportunities.includes(pieceRecord.id)) {
            alert("pepe");
            addRemover(piece);
        }else{
            piece.innerHTML = "";
        }

        
        
    });

    const pieces = piecesArea.childNodes;

    pieces.forEach(piece => {
        if (!safeList.includes(piece.id)) {
            piece.remove();
        }
    });

}

function resetPieceSelection() {
    if(selectedPiece != null){
        selectedPiece.classList.remove("selected");
        selectedPiece = null;
    }
}

function pieceClickEvent(piece){
    const pieceRecord = getPieceRecordFromPiece(piece);
    if(pieceRecord.player == player){
        
        resetPieceSelection();
        selectedPiece = piece;
        selectedPiece.classList.add("selected");
    }
    if(piece.hasChildNodes() && nukePieceRecordThatMissedOportunity(pieceRecord)){
        updatePieces();
    }
    
}

function tileClickEvent(x, y){
    
    if(selectedPiece != null){
        
        const pieceRecord = getPieceRecordFromPiece(selectedPiece);
        const validity = makeMove(pieceRecord, x,y);
        
        switch (validity) {
            case 0:
                alert("neplatný tah!")
                break;
            case 1:
                resetPieceSelection();
                updatePieces();
                player = (player == "white") ? "black" : "white";
                break;
            case 2:
                updatePieces();        
            
        }
        
        /*movePiece(selectedPiece, x, y);
        resetPieceSelection();*/
    }
}

function addRemover(piece) {
    const element = document.createElement("div");
    element.classList.add("removable-tag");
    piece.appendChild(element);
}

generatePlayField();
generatePieces();