import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { ReactComponent as FlagsTargetIcon } from "../assets/flags-target.svg";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { SuccessBadge, TutorialFrame } from "./TutorialFrame";
export function Phase4({ nextPhase }) {
    const [flagTargetState, setFlagsTargetState] = useState("visible");
    const [isComplete, setIsComplete] = useState(false);
    useEffect(() => {
        const timeout = window.setTimeout(() => {
            setFlagsTargetState("animation");
            setIsComplete(true);
        }, 1300);
        return () => window.clearTimeout(timeout);
    }, []);
    const onFlagsTargetAnimationEnded = useCallback(() => {
        setFlagsTargetState("hidden");
        nextPhase();
    }, [nextPhase]);
    const flagTargetClassNames = [
        styles.bareBlockIconFullScreen,
        flagTargetState === "animation" ? styles.fadeOutAnimation : "",
        flagTargetState === "hidden" ? styles.hide : "",
        flagTargetState === "visible" ? styles.show : "",
    ].join(" ");
    return (_jsx(TutorialFrame, { stepIndex: 3, title: "Collect 10 Flags", hint: "Your mission is to ski through 10 flag gates while avoiding the trees.", badge: isComplete ? _jsx(SuccessBadge, { TickIcon: TickIcon }) : null, children: _jsx("div", { className: styles.singleColumnContainer, children: _jsx("div", { className: styles.targetFocusAnchor, children: _jsx(FlagsTargetIcon, { className: flagTargetClassNames, onAnimationEnd: onFlagsTargetAnimationEnded }) }) }) }));
}
