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


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);
        
        piecesArea.appendChild(piece);
        
        movePiece(piece, pieceRecord.x, pieceRecord.y)
        
        if(pieceRecord.player == player){
            piece.addEventListener("click", pieceClickEvent.bind("null", piece))
        }
    });
}

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


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

function pieceClickEvent(piece){
    resetPieceSelection();
    selectedPiece = piece;
    selectedPiece.classList.add("selected");
    

    
}

function tileClickEvent(x, y){
    
    if(selectedPiece != null){
        
        const pieceRecord = getPieceRecordFromPiece(selectedPiece);
        movePiece(selectedPiece, x, y)
        
        alert(isMoveValid(pieceRecord, x,y))
        resetPieceSelection();
    }
}

generatePlayField();
generatePieces();