/**
 * @fileoverview React component for AutomatoGame.jsx
 * 
 * @module games.automato.AutomatoGame
 */


import React, { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import GameBase from "../../../components/game/GameBase";
import GameEditor from "../../../components/game/GameEditor";
import BlocklyEditor from "../../../components/game/editors/BlocklyEditor";
import { createGame } from "./game";
import { gameConfig } from "./config/config";
import { registerBlocks, generateDynamicToolbox } from "./blocks/blocks";
import {
  GameStateProvider,
  useGameState,
} from "../../../contexts/GameStateContext";
import { useAutomatoTour } from "./hooks/useAutomatoTour";
import { debugSolutions } from "./config/debugSolutions";
import "shepherd.js/dist/css/shepherd.css";
import "../../../styles/shepherd-theme.css";

function AutomatoGameContent() {
  const { isDebugMode, setFailureMessage } = useGameState();
  const { startTour } = useAutomatoTour();

  useEffect(() => {
    registerBlocks();
  }, []);

  const toolboxGenerator = useMemo(() => {


    return (allowedBlocks) => generateDynamicToolbox(allowedBlocks);
  }, []);

  const renderEditor = () => {
    return (
      <BlocklyEditor
        toolboxGenerator={toolboxGenerator}
        debugSolutions={isDebugMode ? debugSolutions : null}
      />
    );
  };

  return (
    <GameBase
      gameFactory={createGame}
      gameConfig={gameConfig}
      onHelpClick={startTour}
      helpHandler={startTour}
      customFailureHandler={setFailureMessage}
      failureHandler={setFailureMessage}
    >
      <GameEditor>{renderEditor()}</GameEditor>
    </GameBase>
  );
}

/**
 * Conteúdo principal do jogo Automato.
 * Configura toolbox, registra blocos e injeta o `gameFactory` no `GameBase`.
 * @returns {JSX.Element} Conteúdo do editor e canvas do Automato
 */


export default function AutomatoGame() {
  return (
    <GameStateProvider gameConfig={gameConfig}>
      <AutomatoGameContent />
    </GameStateProvider>
  );
}

/**
 * Componente de página que provê o contexto para o jogo Automato
 * e monta `AutomatoGameContent` dentro do `GameStateProvider`.
 * @returns {JSX.Element}
 */

AutomatoGameContent.propTypes = {};
AutomatoGame.propTypes = {};