import { Cell } from "interface";
import "./GameBoard.scss";
import BoardCell from "./BoardCell";
import { DieViewProps } from "../types/DieViewProps";
import { PlacePieceActionStack } from "../types/PlacePieceActionStack";
import { PlacePieceAction } from "../types/PlacePieceAction";

export interface GameBoardProps {
  modifyDieState: (
    matcher: (die: DieViewProps) => boolean,
    newStateComputer: (die: DieViewProps) => Partial<DieViewProps>,
  ) => void;
  fetchDie: (
    matcher: (die: DieViewProps) => boolean,
  ) => DieViewProps | undefined;
  setSpecialDieUsedInRound: React.Dispatch<React.SetStateAction<boolean>>;
  refreshBoardRender: () => void;
  board: Cell[][];
  placePieceActionStack: PlacePieceActionStack;
  setPlacePieceActionStack: React.Dispatch<
    React.SetStateAction<PlacePieceActionStack>
  >;
}

const GameBoard = (props: GameBoardProps) => {
  const { board, placePieceActionStack, setPlacePieceActionStack } = props;

  return (
    <div className="game-board">
      {board.flatMap((row, rowIndex) =>
        row.map((cell, colIndex) => (
          <BoardCell
            {...props}
            cell={cell}
            placePieceActionHandler={(pieceId, rotation) => {
              placePieceActionStack.executeAction(
                new PlacePieceAction(pieceId, rotation, rowIndex, colIndex),
                board,
              );
              setPlacePieceActionStack(placePieceActionStack);
            }}
          />
        )),
      )}
    </div>
  );
};

export default GameBoard;
