import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { ReactComponent as FlagsTargetIcon } from "../assets/flags-target.svg";
import styles from "./styles.module.css";
import { getConnectedCog } from "../utils/CogManager";
export function Phase4({ nextPhase }) {
    const [flagTargetState, setFlagsTargetState] = useState("visible");
    const onCogButtonClick = useCallback(() => {
        // setFlagsTargetState("animation");
    }, []);
    useEffect(() => {
        const connectedCog = getConnectedCog();
        if (connectedCog) {
            const eventName = connectedCog.publishedDataAnalyser.eventsMap.buttonClick.release;
            connectedCog.publishedDataAnalyser.addListener(eventName, onCogButtonClick);
            return () => {
                connectedCog.publishedDataAnalyser.removeListener(eventName, onCogButtonClick);
            };
        }
    }, []);
    useEffect(() => {
        setTimeout(() => {
            setFlagsTargetState("animation");
        }, 2500);
    }, []);
    const onFlagsTargetAnimationEnded = useCallback(() => {
        setFlagsTargetState("hidden");
        nextPhase();
    }, []);
    const cogIconClassNames = [
        styles.bareBlockIconFullScreen,
        flagTargetState === "animation" ? styles.fadeOutAnimation : "",
        flagTargetState === "hidden" ? styles.hide : "",
        flagTargetState === "visible" ? styles.show : "",
    ].join(" ");
    return (_jsx("div", { className: styles.singleColumnContainer, children: _jsx(FlagsTargetIcon, { className: cogIconClassNames, onClick: onCogButtonClick, onAnimationEnd: onFlagsTargetAnimationEnded }) }));
}
