import { buildBoard, PieceId } from "interface";
import "./GameBoard.scss";
import { useState } from "react";
import BoardCell from "./BoardCell";

export interface GameBoardProps {
  dice: {
    pieceId: PieceId;
    isSelected: boolean;
    isDisabled: boolean;
    rotation: number;
  }[];
  setDice: React.Dispatch<
    React.SetStateAction<
      {
        pieceId: PieceId;
        isSelected: boolean;
        isDisabled: boolean;
        rotation: number;
      }[]
    >
  >;
}

const GameBoard = (props: GameBoardProps) => {
  const [board, setBoard] = useState(buildBoard());
  const [id, setId] = useState(1);
  const refreshBoardRender = () => {
    setBoard(board);
    setId(id + 1);
  };

  return (
    <div className="game-board" id={id.toString()}>
      {board.flatMap((row) =>
        row.map((cell) => (
          <BoardCell
            {...props}
            cell={cell}
            refreshBoardRender={refreshBoardRender}
          />
        )),
      )}
    </div>
  );
};

export default GameBoard;