import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, 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";
import { ReactComponent as OnTiltLeft } from "../assets/blocks/ontiltleft.svg";
import { ReactComponent as OnTiltRight } from "../assets/blocks/ontiltright.svg";
import { ReactComponent as ForwardIcon } from "../assets/blocks/forward.svg";
import { ReactComponent as BackwardIcon } from "../assets/blocks/backward.svg";
import BlockSelector4 from "../block-selector-4";
import { selectedBlockFromTutorialForLeft, selectedBlockFromTutorialForRight, setSelectedBlockFromTutorialForLeft, setSelectedBlockFromTutorialForRight } from "../utils/selected-blocks-from-tutorial";
import { CommandPair, FallbackTiltButton, SuccessBadge, TutorialFrame } from "./TutorialFrame";
const leftPosterItems = [
    { icon: BackwardIcon, block: "moveleft", execute: async () => true },
    { icon: ForwardIcon, block: "moveright", execute: async () => true },
];
const rightPosterItems = [
    { icon: ForwardIcon, block: "moveright", execute: async () => true },
    { icon: BackwardIcon, block: "moveleft", execute: async () => true },
];
const staticBlockItemLeft = { icon: OnTiltLeft, block: "ontiltleft", execute: async () => true };
const staticBlockItemRight = { icon: OnTiltRight, block: "ontiltright", execute: async () => true };
const defaultLeftBlock = leftPosterItems[0];
const defaultRightBlock = rightPosterItems[0];
const chooseSteeringGameFrameStyle = {
    width: "100%",
    height: "min(52vh, 560px)",
    visibility: "hidden",
};
export function Phase3({ nextPhase }) {
    const [gameContainerDimensions, setGameContainerDimensions] = useState(chooseSteeringGameFrameStyle);
    const [isSceneReady, setIsSceneReady] = useState(false);
    const [blocksIconState, setBlocksIconState] = useState("visible");
    const [isComplete, setIsComplete] = useState(false);
    const [selectedLeftBlock, setSelectedLeftBlock] = useState(() => resolveSteeringBlock(selectedBlockFromTutorialForLeft, defaultLeftBlock, leftPosterItems));
    const [selectedRightBlock, setSelectedRightBlock] = useState(() => resolveSteeringBlock(selectedBlockFromTutorialForRight, defaultRightBlock, rightPosterItems));
    const [lastPracticeMove, setLastPracticeMove] = useState("");
    const [practiceMoveCount, setPracticeMoveCount] = useState(0);
    const phaserGameRef = useRef(null);
    const completionStarted = useRef(false);
    const sceneSetupTimeoutRef = useRef();
    const nextPhaseTimeoutRef = useRef();
    const leftInitialIndex = useMemo(() => getPosterItemIndex(selectedLeftBlock, leftPosterItems), [selectedLeftBlock]);
    const rightInitialIndex = useMemo(() => getPosterItemIndex(selectedRightBlock, rightPosterItems), [selectedRightBlock]);
    const controlsReady = true;
    const applySelectedBlocksToScene = useCallback(() => {
        const scene = phaserGameRef.current?.scene;
        if (!scene)
            return;
        scene.selectedCogTiltLeftBlock = selectedLeftBlock;
        scene.selectedCogTiltRightBlock = selectedRightBlock;
    }, [selectedLeftBlock, selectedRightBlock]);
    const runPracticeTilt = useCallback((direction) => {
        const scene = phaserGameRef.current?.scene;
        if (!scene?.player || !scene.isGameRunning)
            return;
        applySelectedBlocksToScene();
        scene.player.actionDecider(direction, "fallback-keyboard");
    }, [applySelectedBlocksToScene]);
    const completeStep = useCallback(() => {
        if (!controlsReady || completionStarted.current)
            return;
        completionStarted.current = true;
        setSelectedBlockFromTutorialForLeft(selectedLeftBlock);
        setSelectedBlockFromTutorialForRight(selectedRightBlock);
        setBlocksIconState("animation");
        setIsComplete(true);
        nextPhaseTimeoutRef.current = window.setTimeout(nextPhase, 900);
    }, [controlsReady, nextPhase, selectedLeftBlock, selectedRightBlock]);
    useEffect(() => {
        const handleMountainReady = () => {
            setGameContainerDimensions({
                ...chooseSteeringGameFrameStyle,
                visibility: "visible",
            });
        };
        const handleCurrentSceneReady = (scene) => {
            sceneSetupTimeoutRef.current = window.setTimeout(() => {
                if (!scene.sys || !scene.physics?.world || !scene.scale)
                    return;
                scene.physics.world.setBounds(0, 0, scene.scale.width, scene.scale.height);
                scene.player?.setCollideWorldBounds(true);
            }, 1000);
            setIsSceneReady(true);
        };
        const handleActionExecuted = ({ block } = {}) => {
            if (block !== "moveleft" && block !== "moveright")
                return;
            setLastPracticeMove(block === "moveleft" ? "left" : "right");
            setPracticeMoveCount(count => count + 1);
        };
        EventBus.on('mountain-ready', handleMountainReady);
        EventBus.on('current-scene-ready', handleCurrentSceneReady);
        EventBus.on('action-executed', handleActionExecuted);
        return () => {
            EventBus.removeListener('action-executed', handleActionExecuted);
            EventBus.removeListener('mountain-ready', handleMountainReady);
            EventBus.removeListener('current-scene-ready', handleCurrentSceneReady);
            if (sceneSetupTimeoutRef.current) {
                window.clearTimeout(sceneSetupTimeoutRef.current);
            }
            if (nextPhaseTimeoutRef.current) {
                window.clearTimeout(nextPhaseTimeoutRef.current);
            }
        };
    }, []);
    useEffect(() => {
        if (!isSceneReady)
            return;
        applySelectedBlocksToScene();
    }, [applySelectedBlocksToScene, isSceneReady]);
    useEffect(() => {
        const handleKeyDown = (event) => {
            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
                return;
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation?.();
            runPracticeTilt(event.key === "ArrowLeft" ? "left" : "right");
        };
        const handleKeyUp = (event) => {
            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
                return;
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation?.();
            phaserGameRef.current?.scene?.player?.actionDecider("none", "fallback-keyboard");
        };
        window.addEventListener("keydown", handleKeyDown, true);
        window.addEventListener("keyup", handleKeyUp, true);
        return () => {
            window.removeEventListener("keydown", handleKeyDown, true);
            window.removeEventListener("keyup", handleKeyUp, true);
        };
    }, [runPracticeTilt]);
    const blocksIconContainerClasses = [
        styles.doubleColumnContainer,
        styles.chooseSteeringContainer,
        blocksIconState === "animation" ? styles.fadeOutAnimation : "",
    ].join(" ");
    return (_jsx(TutorialFrame, { stepIndex: 2, title: "Choose Steering", hint: "Pick an action for each tilt direction. Choose real movement for both sides.", controls: _jsxs(_Fragment, { children: [_jsx(CommandPair, { TriggerIcon: OnTiltLeft, ActionIcon: selectedLeftBlock.icon }), _jsx(CommandPair, { TriggerIcon: OnTiltRight, ActionIcon: selectedRightBlock.icon }), _jsx(FallbackTiltButton, { onPress: completeStep, disabled: !controlsReady || isComplete, label: "Ready" })] }), badge: isComplete ? _jsx(SuccessBadge, { TickIcon: TickIcon }) : null, children: _jsxs("div", { className: blocksIconContainerClasses, "data-testid": "choose-steering-practice", children: [_jsx("div", { className: `${styles.doubleBlockSelectorContainer} ${styles.selectorFocusAnchor}`, children: isSceneReady && (_jsxs(_Fragment, { children: [_jsx(BlockSelector4, { gameRef: phaserGameRef, staticBlock: "left", posterItems: leftPosterItems, staticBlockItem: staticBlockItemLeft, onSelectedBlockChange: setSelectedLeftBlock, initialSelectedIndex: leftInitialIndex }), _jsx(BlockSelector4, { gameRef: phaserGameRef, staticBlock: "right", posterItems: rightPosterItems, staticBlockItem: staticBlockItemRight, onSelectedBlockChange: setSelectedRightBlock, initialSelectedIndex: rightInitialIndex })] })) }), _jsx("div", { className: `${styles.gameContainer} ${styles.chooseSteeringGame}`, style: gameContainerDimensions, "data-testid": "choose-steering-game", "data-selected-left-block": selectedLeftBlock.block, "data-selected-right-block": selectedRightBlock.block, "data-last-practice-move": lastPracticeMove, "data-practice-move-count": practiceMoveCount, children: _jsx(PhaserGame, { ref: phaserGameRef }) })] }) }));
}
function getPosterItemIndex(item, posterItems) {
    const index = posterItems.findIndex(posterItem => posterItem.block === item.block);
    return index === -1 ? 0 : index;
}
function resolveSteeringBlock(item, fallback, posterItems) {
    return posterItems.find(posterItem => posterItem.block === item?.block) || fallback;
}
