import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { PhaserGame } from "../tutorial-game/PhaserGame";
import { EventBus } from "../tutorial-game/EventBus";
export function GenericPhase({ nextPhase, BlocksConnectedIcon, initialBlock }) {
    const [gameContainerDimensions, setGameContainerDimensions] = useState({ width: "40vw", height: "30vh", visibility: "hidden" });
    const [tickIconState, setTickIconState] = useState("hidden");
    const [blocksIconState, setBlocksIconState] = useState("visible");
    const phaserGameRef = useRef(null);
    const cogClickedCounter = useRef(0);
    const cogJumpedCounter = useRef(0);
    const onCogButtonClick = useCallback(() => {
        cogClickedCounter.current++;
        if (cogClickedCounter.current === 3) {
            setBlocksIconState("animation");
            phaserGameRef.current?.game?.destroy(true);
        }
    }, []);
    // useEffect(() => {
    //     const connectedCog = getConnectedCog();
    //     if (connectedCog) {
    //         const eventName = (connectedCog as Cog).publishedDataAnalyser.eventsMap.buttonClick.release;
    //         (connectedCog as Cog).publishedDataAnalyser.addListener(eventName, onCogButtonClick);
    //         return () => {
    //             (connectedCog as Cog).publishedDataAnalyser.removeListener(eventName, onCogButtonClick);
    //         };
    //     }
    // }, []);
    useEffect(() => {
        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"
            });
            if (mountain.scene) {
                // mountain.scene.currentlySectedBlock = initialBlock;
            }
        });
        EventBus.once('player-off-screen', () => {
            setBlocksIconState("animation");
            phaserGameRef.current?.game?.destroy(true);
        });
        EventBus.on('player-jumped', () => {
            cogJumpedCounter.current++;
            if (cogJumpedCounter.current === 3) {
                setTimeout(() => {
                    setBlocksIconState("animation");
                    phaserGameRef.current?.game?.destroy(true);
                }, 1500);
            }
        });
        return () => {
            EventBus.removeListener('mountain-ready');
            EventBus.removeListener('player-off-screen');
            EventBus.removeListener('player-jumped');
        };
    }, [initialBlock]);
    const onBlocksAnimationEnd = useCallback(() => {
        setBlocksIconState("hidden");
        setTickIconState("animation");
    }, []);
    const onTickIconAnimationEnd = useCallback(() => {
        nextPhase();
    }, []);
    const blocksIconContainerClasses = [
        styles.doubleColumnContainer,
        blocksIconState === "animation" ? styles.fadeOutAnimation : "",
        blocksIconState === "hidden" ? styles.hide : ""
    ].join(" ");
    const tickIconClassNames = [
        styles.tickIconFullScreen,
        tickIconState === "animation" ? styles.fadeInAnimation : "",
        tickIconState === "hidden" ? styles.hide : "",
        tickIconState === "visible" ? styles.show : "",
    ].join(" ");
    return (_jsxs("div", { className: styles.singleColumnContainer, children: [_jsxs("div", { className: blocksIconContainerClasses, onAnimationEnd: onBlocksAnimationEnd, children: [_jsx(BlocksConnectedIcon, { className: styles.blocksConnectedIcon }), _jsx("div", { className: styles.gameContainer, style: gameContainerDimensions, children: _jsx(PhaserGame, { ref: phaserGameRef }) })] }), _jsx(TickIcon, { className: tickIconClassNames, onAnimationEnd: onTickIconAnimationEnd })] }));
}
