"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Phase3 = Phase3;
require("core-js/modules/es.promise.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _greenTick = require("../assets/green-tick.svg");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _PhaserGame = require("../tutorial-game/PhaserGame");
var _EventBus = require("../tutorial-game/EventBus");
var _ontiltleft = require("../assets/blocks/ontiltleft.svg");
var _ontiltright = require("../assets/blocks/ontiltright.svg");
var _forward = require("../assets/blocks/forward.svg");
var _backward = require("../assets/blocks/backward.svg");
var _nowhere = require("../assets/blocks/nowhere.svg");
var _blockSelector = _interopRequireDefault(require("../block-selector-4"));
var _selectedBlocksFromTutorial = require("../utils/selected-blocks-from-tutorial");
var _playbutton = _interopRequireDefault(require("../assets/playbutton.svg"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const posterItemsLeft = [{
  icon: _forward.ReactComponent,
  block: "moveright",
  execute: async () => true
}, {
  icon: _nowhere.ReactComponent,
  block: "dontmove",
  execute: async () => true
}, {
  icon: _backward.ReactComponent,
  block: "moveleft",
  execute: async () => true
}];
const posterItemsRight = [{
  icon: _forward.ReactComponent,
  block: "moveright",
  execute: async () => true
}, {
  icon: _nowhere.ReactComponent,
  block: "dontmove",
  execute: async () => true
}, {
  icon: _backward.ReactComponent,
  block: "moveleft",
  execute: async () => true
}];
const staticBlockItemUp = {
  icon: _ontiltleft.ReactComponent,
  block: "ontiltleft",
  execute: async () => true
};
const staticBlockItemDown = {
  icon: _ontiltright.ReactComponent,
  block: "ontiltright",
  execute: async () => true
};
function Phase3(_ref) {
  let {
    nextPhase
  } = _ref;
  const [gameContainerDimensions, setGameContainerDimensions] = (0, _react.useState)({
    width: "40vw",
    height: "60vh",
    visibility: "hidden"
  });
  const [posterItemsLeftState, setPosterItemsLeftState] = (0, _react.useState)([]);
  const [posterItemsRightState, setPosterItemsRightState] = (0, _react.useState)([]);
  const [isSceneReady, setIsSceneReady] = (0, _react.useState)(false);
  const [tickIconState, setTickIconState] = (0, _react.useState)("hidden");
  const [blocksIconState, setBlocksIconState] = (0, _react.useState)("visible");
  const phaserGameRef = (0, _react.useRef)(null);
  const [showAreYouReady, setShowAreYouReady] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    // setting a timeinterval to check every 100ms if both controls have been set
    const checkControlsSet = setInterval(() => {
      var _phaserGameRef$curren, _phaserGameRef$curren2;
      const leftClickBlock = (_phaserGameRef$curren = phaserGameRef.current) === null || _phaserGameRef$curren === void 0 || (_phaserGameRef$curren = _phaserGameRef$curren.scene) === null || _phaserGameRef$curren === void 0 || (_phaserGameRef$curren = _phaserGameRef$curren.selectedCogTiltLeftBlock) === null || _phaserGameRef$curren === void 0 ? void 0 : _phaserGameRef$curren.block;
      const rightClickBlock = (_phaserGameRef$curren2 = phaserGameRef.current) === null || _phaserGameRef$curren2 === void 0 || (_phaserGameRef$curren2 = _phaserGameRef$curren2.scene) === null || _phaserGameRef$curren2 === void 0 || (_phaserGameRef$curren2 = _phaserGameRef$curren2.selectedCogTiltRightBlock) === null || _phaserGameRef$curren2 === void 0 ? void 0 : _phaserGameRef$curren2.block;
      if ((leftClickBlock === "moveright" || leftClickBlock === "moveleft") && (rightClickBlock === "moveright" || rightClickBlock === "moveleft")) {
        setShowAreYouReady(true);
        clearInterval(checkControlsSet);
      }
    }, 100);
    return () => {
      clearInterval(checkControlsSet);
    };
  }, []);
  (0, _react.useEffect)(() => {
    // setting the poster items for click and no click IF they exist in the game
    const leftClickBlock = _selectedBlocksFromTutorial.selectedBlockFromTutorialForLeft;
    const rightClickBlock = _selectedBlocksFromTutorial.selectedBlockFromTutorialForRight;
    if (leftClickBlock) {
      const index = posterItemsLeft.findIndex(item => item.block === leftClickBlock.block);
      if (index !== -1) {
        const selectedBlock = posterItemsLeft[index];
        const middleIndex = Math.floor(posterItemsLeft.length / 2);
        // remove the selected block from the poster items
        const newposterItemsClick = posterItemsLeft.filter(item => item.block !== selectedBlock.block);
        // add the selected block to the middle of the poster items
        newposterItemsClick.splice(middleIndex, 0, selectedBlock);
        setPosterItemsLeftState(newposterItemsClick);
      }
    } else {
      // if the left block is not set, we set the poster items to the default ones
      setPosterItemsLeftState(posterItemsLeft);
    }
    if (rightClickBlock) {
      const index = posterItemsRight.findIndex(item => item.block === rightClickBlock.block);
      if (index !== -1) {
        const selectedBlock = posterItemsRight[index];
        const middleIndex = Math.floor(posterItemsRight.length / 2);
        // remove the selected block from the poster items
        const newposterItemsRight = posterItemsRight.filter(item => item.block !== selectedBlock.block);
        // add the selected block to the middle of the poster items
        newposterItemsRight.splice(middleIndex, 0, selectedBlock);
        setPosterItemsRightState(newposterItemsRight);
      }
    } else {
      // if the right click block is not set, we set the poster items to the default ones
      setPosterItemsRightState(posterItemsRight);
    }
  }, []);
  (0, _react.useEffect)(() => {
    _EventBus.EventBus.on('mountain-ready', mountain => {
      const mountainHeightScaled = mountain.height * mountain.scaleFactors.height;
      const mountainWidthScaled = mountain.width * mountain.scaleFactors.width;
      setGameContainerDimensions({
        width: mountainWidthScaled + "px",
        height: mountainHeightScaled + "px",
        visibility: "visible"
      });
      setIsSceneReady(true);
    });
    _EventBus.EventBus.on('current-scene-ready', scene => {
      setTimeout(() => {
        var _scene$player;
        scene.physics.world.setBounds(0, 0, scene.scale.width, scene.scale.height);
        (_scene$player = scene.player) === null || _scene$player === void 0 || _scene$player.setCollideWorldBounds(true);
        // scene.spawnFlags();
        // const flag1 = scene.flags?.getChildren()[0];
        // Phaser.Actions.SetX(scene.flags?.getChildren() || [], 50 * (scene.mountain?.scaleFactors?.width || 0));
        // if (flag1) Phaser.Actions.SetY([flag1], 1200 * (scene.mountain?.scaleFactors?.height || 0));
      }, 1000);
    });

    // EventBus.on('flags-collected', (scene: PlayScene) => {
    //     if (scene.collectedFlags === 2) {
    //         setShowAreYouReady(true);
    //         // setTimeout(() => {
    //         // setBlocksIconState("animation");
    //         // phaserGameRef.current?.game?.destroy(true);
    //         // }, 1500);
    //     }
    // });

    return () => {
      // EventBus.removeListener('flags-collected');
      _EventBus.EventBus.removeListener('mountain-ready');
      _EventBus.EventBus.removeListener('current-scene-ready');
      _EventBus.EventBus.removeListener('player-jumped');
    };
  }, []);
  const onBlocksAnimationEnd = (0, _react.useCallback)(() => {
    setBlocksIconState("hidden");
    setTickIconState("animation");
  }, []);
  const onTickIconAnimationEnd = (0, _react.useCallback)(() => {
    nextPhase();
  }, []);
  const blocksIconContainerClasses = [_stylesModule.default.singleColumnContainer, blocksIconState === "animation" ? _stylesModule.default.fadeOutAnimation : "", blocksIconState === "hidden" ? _stylesModule.default.hide : ""].join(" ");
  const tickIconClassNames = [_stylesModule.default.tickIconFullScreen, tickIconState === "animation" ? _stylesModule.default.fadeInAnimation : "", tickIconState === "hidden" ? _stylesModule.default.hide : "", tickIconState === "visible" ? _stylesModule.default.show : ""].join(" ");
  const handleAreYouReadyClick = () => {
    var _phaserGameRef$curren3;
    setBlocksIconState("animation");
    (_phaserGameRef$curren3 = phaserGameRef.current) === null || _phaserGameRef$curren3 === void 0 || (_phaserGameRef$curren3 = _phaserGameRef$curren3.game) === null || _phaserGameRef$curren3 === void 0 || _phaserGameRef$curren3.destroy(true);
    setShowAreYouReady(false);
    if (phaserGameRef.current && phaserGameRef.current.scene) {
      (0, _selectedBlocksFromTutorial.setSelectedBlockFromTutorialForLeft)(phaserGameRef.current.scene.selectedCogTiltLeftBlock);
      (0, _selectedBlocksFromTutorial.setSelectedBlockFromTutorialForRight)(phaserGameRef.current.scene.selectedCogTiltRightBlock);
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _stylesModule.default.singleColumnContainer,
    children: [showAreYouReady && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _stylesModule.default.areYouReadyContainer,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        src: _playbutton.default,
        alt: "Play",
        className: _stylesModule.default.playButton,
        onClick: handleAreYouReadyClick
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: blocksIconContainerClasses,
      onAnimationEnd: onBlocksAnimationEnd,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _stylesModule.default.doubleBlockSelectorContainer,
        children: [!!posterItemsLeftState.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSelector.default, {
          gameRef: phaserGameRef,
          staticBlock: "left",
          posterItems: posterItemsLeftState,
          staticBlockItem: staticBlockItemUp
        }), !!posterItemsRightState.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSelector.default, {
          gameRef: phaserGameRef,
          staticBlock: "right",
          posterItems: posterItemsRightState,
          staticBlockItem: staticBlockItemDown
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _stylesModule.default.gameContainer,
        style: gameContainerDimensions,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhaserGame.PhaserGame, {
          ref: phaserGameRef
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_greenTick.ReactComponent, {
      className: tickIconClassNames,
      onAnimationEnd: onTickIconAnimationEnd
    })]
  });
}