/**
 * @fileoverview Componente React principal para o jogo Aspirador
 * * @module games.aspirador.AspiradorGame
 */

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 { generateDynamicToolbox, registerBlocks } from "./blocks/blocks";
import { GameStateProvider, useGameState } from "../../../contexts/GameStateContext";
import { useAspiradorTour } from "./hooks/useAspiradorTour";
import { debugSolutions } from "./config/debugSolutions";
import "shepherd.js/dist/css/shepherd.css";
import "../../../styles/shepherd-theme.css";
import { starterBlocks } from "./config/starterBlocks";

/**
 * Componente interno que monta a cena e o editor do jogo Aspirador.
 * Registra blocos, configura toolbox dinâmico e injeta o `gameFactory`.
 * @returns {JSX.Element} Conteúdo do jogo (editor + canvas)
 */
function AspiradorContent() {
  const { setFailureMessage, isDebugMode } = useGameState();
  
  // Hook para o tutorial passo a passo (será criado depois)
  useAspiradorTour();

  // Registra os blocos customizados do Blockly ao montar o componente
  useEffect(() => {
    registerBlocks();
  }, []);

  // Memoriza a função geradora do toolbox para evitar re-renderizações desnecessárias
  const toolboxGenerator = useMemo(() => {
    return (allowedBlocks) => generateDynamicToolbox(allowedBlocks);
  }, []);

  return (
    <GameBase
      gameFactory={createGame}
      gameConfig={gameConfig}
      customFailureHandler={setFailureMessage}
      failureHandler={setFailureMessage}
    >
      <GameEditor>
        <BlocklyEditor
          toolboxGenerator={toolboxGenerator}
          debugSolutions={isDebugMode ? debugSolutions : null}
          starterBlocks={starterBlocks}
        />
      </GameEditor>
    </GameBase>
  );
}

/**
 * Componente de página que fornece o contexto de estado do jogo Aspirador.
 * Envolve `AspiradorContent` com o `GameStateProvider` configurado.
 * @returns {JSX.Element} Página completa do jogo Aspirador
 */
export default function AspiradorGame() {
  return (
    <GameStateProvider gameConfig={gameConfig}>
      <AspiradorContent />
    </GameStateProvider>
  );
}

AspiradorContent.propTypes = {};
AspiradorGame.propTypes = {};