import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { ReactComponent as OnTouchCogIcon } from "../assets/blocks/ontouchcog-bare.svg";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { getConnectedCog } from "../utils/CogManager";
export function Phase0({ nextPhase }) {
    const [tickIconState, setTickIconState] = useState("hidden");
    const [cogIconState, setCogIconState] = useState("visible");
    const onCogButtonClick = useCallback(() => {
        setCogIconState("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);
            };
        }
    }, []);
    const onCogIconAnimationEnd = useCallback(() => {
        setCogIconState("hidden");
        setTickIconState("animation");
    }, []);
    const onTickIconAnimationEnd = useCallback(() => {
        nextPhase();
    }, []);
    const cogIconClassNames = [
        styles.bareBlockIconFullScreen,
        cogIconState === "animation" ? styles.fadeOutAnimation : "",
        cogIconState === "hidden" ? styles.hide : "",
        cogIconState === "visible" ? styles.show : "",
    ].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: [_jsx(OnTouchCogIcon, { className: cogIconClassNames, onAnimationEnd: onCogIconAnimationEnd }), _jsx(TickIcon, { className: tickIconClassNames, onAnimationEnd: onTickIconAnimationEnd })] }));
}
