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";

function ExemploContent() {
  const { setFailureMessage, isDebugMode } = useGameState();

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

  // Memoriza o gerador para evitar recriações desnecessárias do toolbox
  const toolboxGenerator = useMemo(() => {
    return (allowedBlocks) => generateDynamicToolbox(allowedBlocks);
  }, []);

  return (
    <GameBase
      gameFactory={createGame}
      gameConfig={gameConfig}
      customFailureHandler={setFailureMessage}
      failureHandler={setFailureMessage}
    >
      <GameEditor>
        <BlocklyEditor toolboxGenerator={toolboxGenerator} />
      </GameEditor>
    </GameBase>
  );
}

export default function ExemploGame() {
  return (
    <GameStateProvider gameConfig={gameConfig}>
      <ExemploContent />
    </GameStateProvider>
  );
}

ExemploContent.propTypes = {};
ExemploGame.propTypes = {};
