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";

type Props = {
    nextPhase: () => void;
};

export function Phase4({ nextPhase }: Props) {
    const [flagTargetState, setFlagsTargetState] = useState<"visible" | "animation" | "hidden">("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 (
        <TutorialFrame
            stepIndex={3}
            title="Collect 10 Flags"
            hint="Your mission is to ski through 10 flag gates while avoiding the trees."
            badge={isComplete ? <SuccessBadge TickIcon={TickIcon} /> : null}
        >
            <div className={styles.singleColumnContainer}>
                <div className={styles.targetFocusAnchor}>
                    <FlagsTargetIcon className={flagTargetClassNames} onAnimationEnd={onFlagsTargetAnimationEnded} />
                </div>
            </div>
        </TutorialFrame>
    );
}
