import React from "react";
import {
  ChessGame,
  deepMergeChessboardOptions,
  useChessGameContext,
} from "@react-chess-tools/react-chess-game";
import { getCustomSquareStyles, stringToMove } from "../../../utils";
import { useChessPuzzleContext } from "../../..";
import { useChessPuzzleTheme } from "../../../theme/context";

export interface PuzzleBoardProps extends React.ComponentProps<
  typeof ChessGame.Board
> {}

export const PuzzleBoard: React.FC<PuzzleBoardProps> = ({
  options = {},
  ...rest
}) => {
  const puzzleContext = useChessPuzzleContext();
  const gameContext = useChessGameContext();
  const theme = useChessPuzzleTheme();

  if (!puzzleContext) {
    throw new Error("PuzzleContext not found");
  }
  if (!gameContext) {
    throw new Error("ChessGameContext not found");
  }

  const { game } = gameContext;
  const { status, hint, isPlayerTurn, nextMove } = puzzleContext;

  const mergedOptions = deepMergeChessboardOptions(options, {
    squareStyles: getCustomSquareStyles(
      status,
      hint,
      isPlayerTurn,
      game,
      stringToMove(game, nextMove),
      theme,
    ),
  });

  return <ChessGame.Board {...rest} options={mergedOptions} />;
};