import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PhaserGame } from './game/PhaserGame';
import "./styles.css";
import styles from './App.module.css';
import { useEffect, useRef, useState } from 'react';
import { EventBus } from './game/EventBus';
import { ReactComponent as FlagsTarget } from './assets/flags-target-small.svg';
import { raftDisconnectedSubscriptionHelper } from './utils/raft-subscription-helpers';
import { RaftTypeE } from '@robotical/webapp-types/dist-types/src/types/raft';
import OverlayingTutorial from './overlaying-tutorial';
import WonOverlay from './WonOverlay';
import { ReactComponent as FlagsIcon } from './assets/flags.svg';
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 { ReactComponent as NowhereIcon } from "./assets/blocks/nowhere.svg";
import BlockSelector4 from "./block-selector-4";
import { selectedBlockFromTutorialForLeft, selectedBlockFromTutorialForRight } from './utils/selected-blocks-from-tutorial';
import ShouldIStayOrShouldIGo from './ShouldIStayOrShouldIGo';
import { hasMartyWebAppHost } from './utils/CogManager';
import { FiInfo, FiX } from 'react-icons/fi';
const staticBlockItemLeft = { icon: OnTiltLeft, block: "ontiltleft", execute: async () => true };
const staticBlockItemRight = { icon: OnTiltRight, block: "ontiltright", execute: async () => true };
const posterItems = [
    { icon: ForwardIcon, block: "moveright", execute: async () => true },
    { icon: NowhereIcon, block: "dontmove", execute: async () => true },
    { icon: BackwardIcon, block: "moveleft", execute: async () => true },
];
const defaultLeftAction = posterItems[2];
const defaultRightAction = posterItems[0];
const MOUNTAIN_ASPECT_RATIO = 2500 / 2003;
function Skiing() {
    const [gameContainerDimensions, setGameContainerDimensions] = useState({ width: "70vw", height: "80vh" });
    const [collectedFlags, setCollectedFlags] = useState(0);
    const [isZooming, setIsZooming] = useState(false);
    const [flagFeedbackId, setFlagFeedbackId] = useState(0);
    const [flagFeedbackText, setFlagFeedbackText] = useState("+1");
    const phaserGameRef = useRef(null);
    const [connectedCog, setConnectedCog] = useState(null);
    const [isWinningFlagVisible, setIsWinningFlagVisible] = useState(false);
    const [posterItemsLeftState, setPosterItemsLeftState] = useState([]);
    const [posterItemsRightState, setPosterItemsRightState] = useState([]);
    const [selectedLeftAction, setSelectedLeftAction] = useState(defaultLeftAction);
    const [selectedRightAction, setSelectedRightAction] = useState(defaultRightAction);
    const [tutorialPhase, setTutorialPhase] = useState(1);
    const [shouldIStayOrShouldIGoVisible, setShouldIStayOrShouldIGoVisible] = useState(false);
    const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
    const [isMainGameRunning, setIsMainGameRunning] = useState(false);
    const [hasHostApp] = useState(() => hasMartyWebAppHost());
    const subHelper = useRef(null);
    const targetAchievedTimeoutRef = useRef();
    const wasGameRunningBeforeInfoModalRef = useRef(false);
    useEffect(() => {
        const selectedCog = window.applicationManager?.getTheCurrentlySelectedDeviceOrFirstOfItsKind(RaftTypeE.COG);
        if (selectedCog) {
            setConnectedCog(selectedCog);
            subHelper.current = raftDisconnectedSubscriptionHelper(selectedCog);
            subHelper.current.subscribe(() => {
                setConnectedCog(null);
                subHelper.current?.unsubscribe();
            });
        }
        return () => {
            subHelper.current?.unsubscribe();
        };
    }, []);
    useEffect(() => {
        const handleMountainReady = (mountain) => {
            const mountainHeightScaled = mountain.height * mountain.scaleFactors.height;
            const mountainWidthScaled = mountain.width * mountain.scaleFactors.width;
            setGameContainerDimensions({
                width: mountainWidthScaled + "px",
                height: mountainHeightScaled + "px"
            });
        };
        const handleFlagsCollected = (sceneInstance) => {
            setCollectedFlags(sceneInstance.collectedFlags);
            setFlagFeedbackText("+1");
            setFlagFeedbackId(feedbackId => feedbackId + 1);
        };
        const handleFlagsLost = (sceneInstance) => {
            setCollectedFlags(sceneInstance.collectedFlags);
            setFlagFeedbackText("-1");
            setFlagFeedbackId(feedbackId => feedbackId + 1);
        };
        const handleTargetAchieved = () => {
            if (!phaserGameRef.current?.scene)
                return;
            setIsWinningFlagVisible(true);
            targetAchievedTimeoutRef.current = window.setTimeout(() => {
                setIsWinningFlagVisible(false);
                setShouldIStayOrShouldIGoVisible(true);
            }, 2000);
        };
        const handleDie = () => {
            setCollectedFlags(0);
            setIsInfoModalOpen(false);
        };
        const handleGameRunningChanged = (sceneInstance) => {
            setIsMainGameRunning(sceneInstance.isGameRunning);
        };
        EventBus.on('mountain-ready', handleMountainReady);
        EventBus.on('flags-collected', handleFlagsCollected);
        EventBus.on('flags-lost', handleFlagsLost);
        EventBus.on('target-achieved', handleTargetAchieved);
        EventBus.on('die', handleDie);
        EventBus.on('game-running-changed', handleGameRunningChanged);
        return () => {
            EventBus.removeListener('mountain-ready', handleMountainReady);
            EventBus.removeListener('flags-collected', handleFlagsCollected);
            EventBus.removeListener('flags-lost', handleFlagsLost);
            EventBus.removeListener('target-achieved', handleTargetAchieved);
            EventBus.removeListener('die', handleDie);
            EventBus.removeListener('game-running-changed', handleGameRunningChanged);
            if (targetAchievedTimeoutRef.current) {
                window.clearTimeout(targetAchievedTimeoutRef.current);
            }
        };
    }, []);
    useEffect(() => {
        if (collectedFlags <= 0)
            return;
        setIsZooming(true);
        const timeout = window.setTimeout(() => {
            setIsZooming(false);
        }, 300);
        return () => window.clearTimeout(timeout);
    }, [collectedFlags]);
    useEffect(() => {
        if (!isInfoModalOpen)
            return;
        const scene = phaserGameRef.current?.scene;
        wasGameRunningBeforeInfoModalRef.current = !!scene?.isGameRunning;
        if (scene?.sys && scene.isGameRunning) {
            scene.isGameRunning = false;
            scene.physics.pause();
            scene.anims.pauseAll();
        }
        const handleKeyDown = (event) => {
            if (event.key === "Escape") {
                setIsInfoModalOpen(false);
            }
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => {
            window.removeEventListener("keydown", handleKeyDown);
            const scene = phaserGameRef.current?.scene;
            if (wasGameRunningBeforeInfoModalRef.current && scene?.sys && !scene.isGameOverVisible) {
                scene.physics.resume();
                scene.anims.resumeAll();
                scene.isGameRunning = true;
            }
            wasGameRunningBeforeInfoModalRef.current = false;
        };
    }, [isInfoModalOpen]);
    const applyMissionSelection = (leftAction, rightAction) => {
        setPosterItemsLeftState(posterItems);
        setPosterItemsRightState(posterItems);
        setSelectedLeftAction(leftAction);
        setSelectedRightAction(rightAction);
        const scene = phaserGameRef.current?.scene;
        if (scene) {
            scene.selectedCogTiltLeftBlock = leftAction;
            scene.selectedCogTiltRightBlock = rightAction;
        }
    };
    const onTutorialFinished = () => {
        const selectedLeft = resolvePosterItem(selectedBlockFromTutorialForLeft, defaultLeftAction);
        const selectedRight = resolvePosterItem(selectedBlockFromTutorialForRight, defaultRightAction);
        applyMissionSelection(selectedLeft, selectedRight);
        setTutorialPhase(undefined);
        EventBus.emit('tutorial-finished');
        window.setTimeout(() => {
            if (phaserGameRef.current?.scene && !phaserGameRef.current.scene.isGameRunning) {
                phaserGameRef.current.scene.handleGameRestart();
            }
        }, 150);
    };
    const onKeepPlaying = () => {
        setShouldIStayOrShouldIGoVisible(false);
        setCollectedFlags(0);
        phaserGameRef.current?.scene?.handleGameRestart();
    };
    const onGoNext = () => {
        window.applicationManager?.carouselNavigatorManager.getNavigator("games")?.navigate("/cog-shooter-game");
    };
    const handleFallbackTilt = (direction) => {
        const scene = phaserGameRef.current?.scene;
        if (!scene?.player)
            return;
        if (!scene.isGameRunning && !scene.isGameOverVisible) {
            scene.handleGameRestart();
        }
        if (!scene.isGameRunning)
            return;
        scene.selectedCogTiltLeftBlock = selectedLeftAction;
        scene.selectedCogTiltRightBlock = selectedRightAction;
        scene.player.actionDecider(direction, "fallback-button");
    };
    const LeftActionIcon = selectedLeftAction.icon;
    const RightActionIcon = selectedRightAction.icon;
    const isMissionReady = tutorialPhase === undefined && posterItemsLeftState.length > 0 && posterItemsRightState.length > 0;
    const shouldShowFallbackTilt = !hasHostApp && !connectedCog && isMissionReady;
    const playAreaClasses = [
        styles.playArea,
        isMissionReady ? styles.playAreaWithSelector : ""
    ].join(" ");
    const gameContainerStyle = isMissionReady
        ? {
            width: `min(${gameContainerDimensions.width}, 100%, calc((100vh - 28px) * ${MOUNTAIN_ASPECT_RATIO}))`,
            height: "auto",
            aspectRatio: `${MOUNTAIN_ASPECT_RATIO}`,
        }
        : gameContainerDimensions;
    return (_jsxs("div", { className: styles.App, children: [isWinningFlagVisible && _jsx(WonOverlay, {}), shouldIStayOrShouldIGoVisible && _jsx(ShouldIStayOrShouldIGo, { keepPlaying: onKeepPlaying, goNext: onGoNext }), _jsx(OverlayingTutorial, { tutorialPhase: tutorialPhase, setTutorialPhase: setTutorialPhase, onTutorialFinished: onTutorialFinished }), _jsxs("div", { className: playAreaClasses, children: [isMissionReady && (_jsxs("div", { className: styles.selectorPanel, children: [_jsx(BlockSelector4, { gameRef: phaserGameRef, staticBlock: "left", posterItems: posterItemsLeftState, staticBlockItem: staticBlockItemLeft, onSelectedBlockChange: setSelectedLeftAction, initialSelectedIndex: getPosterItemIndex(selectedLeftAction) }), _jsx(BlockSelector4, { gameRef: phaserGameRef, staticBlock: "right", posterItems: posterItemsRightState, staticBlockItem: staticBlockItemRight, onSelectedBlockChange: setSelectedRightAction, initialSelectedIndex: getPosterItemIndex(selectedRightAction) })] })), _jsxs("div", { className: styles.gameContainer, style: gameContainerStyle, "data-testid": "main-game-container", "data-main-game-running": isMainGameRunning ? "true" : "false", children: [_jsxs("div", { className: styles.missionHud, children: [_jsxs("div", { className: styles.missionCluster, children: [_jsxs("div", { className: styles.progressPill, children: [_jsx(FlagsIcon, { className: styles.flagsIcon }), _jsxs("div", { className: `${styles.score} ${isZooming ? styles.zoom : ''}`, children: [collectedFlags, _jsx("span", { children: "/10" })] })] }), isMissionReady && (_jsxs("div", { className: styles.commandGroup, "aria-hidden": "true", children: [_jsxs("div", { className: styles.commandPill, children: [_jsx(OnTiltLeft, { className: styles.commandTriggerIcon }), _jsx("span", { className: styles.commandArrow, children: "\u2192" }), _jsx(LeftActionIcon, { className: styles.commandActionIcon })] }), _jsxs("div", { className: styles.commandPill, children: [_jsx(OnTiltRight, { className: styles.commandTriggerIcon }), _jsx("span", { className: styles.commandArrow, children: "\u2192" }), _jsx(RightActionIcon, { className: styles.commandActionIcon })] })] })), shouldShowFallbackTilt && (_jsxs("div", { className: styles.fallbackTiltControls, children: [_jsx("button", { className: styles.fallbackTiltButton, type: "button", onClick: () => handleFallbackTilt("left"), children: "Left" }), _jsx("button", { className: styles.fallbackTiltButton, type: "button", onClick: () => handleFallbackTilt("right"), children: "Right" })] }))] }), _jsxs("div", { className: styles.hudActions, children: [isMissionReady && (_jsx("button", { className: styles.infoButton, type: "button", "aria-label": "Game instructions", title: "Game instructions", onClick: () => setIsInfoModalOpen(true), children: _jsx(FiInfo, { "aria-hidden": "true" }) })), _jsx("div", { className: styles.targetPill, "aria-hidden": "true", children: _jsx(FlagsTarget, { className: styles.flagsTargetIcon }) })] })] }), isMissionReady && isInfoModalOpen && (_jsx("div", { className: styles.infoModalBackdrop, role: "presentation", onClick: () => setIsInfoModalOpen(false), children: _jsxs("div", { className: styles.infoModalPanel, role: "dialog", "aria-modal": "true", "aria-labelledby": "skiing-game-info-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: styles.infoModalHeader, children: [_jsx("h2", { id: "skiing-game-info-title", children: "How To Play" }), _jsx("button", { className: styles.infoCloseButton, type: "button", "aria-label": "Close instructions", onClick: () => setIsInfoModalOpen(false), children: _jsx(FiX, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: styles.infoModalSteps, children: [_jsxs("div", { className: styles.infoStep, children: [_jsx("div", { className: styles.infoStepIcon, children: _jsx(OnTiltLeft, { "aria-hidden": "true" }) }), _jsx("p", { children: "Tilt Cog left or right to run the selected steering action." })] }), _jsxs("div", { className: styles.infoStep, children: [_jsx("div", { className: styles.infoStepIcon, children: _jsx(RightActionIcon, { "aria-hidden": "true" }) }), _jsx("p", { children: "Use the selectors to choose how Marty moves for each tilt." })] }), _jsxs("div", { className: styles.infoStep, children: [_jsx("div", { className: styles.infoStepIcon, children: _jsx(FlagsIcon, { "aria-hidden": "true" }) }), _jsx("p", { children: "Ski through 10 flag gates while avoiding the trees." })] })] })] }) })), flagFeedbackId > 0 && (_jsx("div", { className: styles.flagFeedback, "aria-hidden": "true", children: flagFeedbackText }, flagFeedbackId)), _jsx(PhaserGame, { ref: phaserGameRef })] })] })] }));
}
export default Skiing;
function resolvePosterItem(item, fallback) {
    if (!item)
        return fallback;
    return posterItems.find(posterItem => posterItem.block === item.block) || fallback;
}
function getPosterItemIndex(item) {
    const index = posterItems.findIndex(posterItem => posterItem.block === item.block);
    return index === -1 ? 1 : index;
}
