/*
  MIGRATION: Wave 2 — Portuguese -> English identifier migration
  TODO: Replace Portuguese aliases (ex.: `faseAtual` -> `currentPhase`) in this file.
  See app/migrations/wave-2-candidates.txt for context.
*/
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 { useSemaforoTour } from "./hooks/useSemaforoTour";
import { debugSolutions } from "./config/debugSolutions";
import "shepherd.js/dist/css/shepherd.css";
import "../../../styles/shepherd-theme.css";

function SemaforoContent() {
  const { startTour } = useSemaforoTour();
  const { setFailureMessage, isDebugMode } = useGameState();

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

  const toolboxGenerator = useMemo(() => {
    return (allowedBlocks) => generateDynamicToolbox(allowedBlocks);
  }, []);

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

/**
 * Componente que monta o conteúdo do jogo Semáforo.
 * Registra blocos, configura a toolbox dinâmica e provê o editor do jogo.
 * Não recebe props e utiliza contextos internos (`GameStateContext`).
 * @returns {JSX.Element} Elemento que representa a área do jogo com editor Blockly.
 */

export default function SemaforoGame() {
  return (
    <GameStateProvider gameConfig={gameConfig}>
      <SemaforoContent />
    </GameStateProvider>
  );
}

/**
 * Componente wrapper que injeta `GameStateProvider` e expõe o jogo Semáforo.
 * @returns {JSX.Element} Componente raiz do jogo carregável pela rota.
 */

SemaforoContent.propTypes = {};
SemaforoGame.propTypes = {};
