import React, { useState } from "react";
import GameBoard from "./components/GameBoard";
import DiceSet from "./components/DiceSet";
import "./GamePage.scss";
import { PieceId } from "interface";

const GamePage = () => {
  const getRandomPieceId = () => {
    const randomId = Math.floor(Math.random() * Object.keys(PieceId).length);
    return Object.values(PieceId)[randomId];
  };

  const [dice, setDice] = useState(
    [1, 2, 3, 4].map(() => {
      return {
        pieceId: getRandomPieceId(),
        isSelected: false,
        isDisabled: false,
        rotation: 0,
      };
    }),
  );

  return (
    <React.Fragment>
      <h1>Game Page Title</h1>
      <div className="game-panel">
        <GameBoard dice={dice} setDice={setDice} />
        <div className="rigth-panel">
          <DiceSet dice={dice} setDice={setDice} />
        </div>
      </div>
    </React.Fragment>
  );
};

export default GamePage;
