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 ExemploContent2() {
  const { setFailureMessage } = useGameState();

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

  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 ExemploGame2() {
  return (
    <GameStateProvider gameConfig={gameConfig}>
      <ExemploContent2 />
    </GameStateProvider>
  );
}

ExemploContent2.propTypes = {};
ExemploGame2.propTypes = {};
