import { useCallback, useEffect, useRef, useState } from "react";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { IRefPhaserGame, PhaserGame } from "../tutorial-game/PhaserGame";
import { EventBus } from "../tutorial-game/EventBus";
import { Sky } from "../tutorial-game/entities/Sky";
import BlockSelector from "../block-selector";
import PlayScene from "../tutorial-game/scenes/PlayScene";

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

export function Phase4({ nextPhase }: Props) {
    const [gameContainerDimensions, setGameContainerDimensions] = useState({ width: "40vw", height: "30vh", visibility: "hidden" } as React.CSSProperties);

    const [tickIconState, setTickIconState] = useState<"hidden" | "visible" | "animation">("hidden");
    const [blocksIconState, setBlocksIconState] = useState<"hidden" | "visible" | "animation">("visible");
    const phaserGameRef = useRef<IRefPhaserGame>(null);

    useEffect(() => {
        EventBus.on('sky-ready', (sky: Sky) => {
            const skyHeightScaled = sky.height * sky.scaleFactors.height;
            const skyWidthScaled = sky.width * sky.scaleFactors.width;
            setGameContainerDimensions({
                width: skyWidthScaled + "px",
                height: skyHeightScaled + "px",
                visibility: "visible"
            });
        });

        EventBus.on('current-scene-ready', (scene: PlayScene) => {
            setTimeout(() => {
                scene.physics.world.setBounds(0, 0, 400, scene.scale.height);
                scene.player?.setCollideWorldBounds(true);
                scene.spawnStar();
                Phaser.Actions.SetX(scene.stars?.getChildren() || [], 300);
                Phaser.Actions.SetY(scene.stars?.getChildren() || [], 180);
            }, 1000);
        });

        EventBus.on('star-collected', () => {
            setTimeout(() => {
                setBlocksIconState("animation");
                phaserGameRef.current?.game?.destroy(true);
            }, 1500);
        });



        return () => {
            EventBus.removeListener('star-collected');
            EventBus.removeListener('sky-ready');
            EventBus.removeListener('current-scene-ready');
            EventBus.removeListener('player-jumped');
        }
    }, []);

    const onBlocksAnimationEnd = useCallback(() => {
        setBlocksIconState("hidden");
        setTickIconState("animation");
    }, []);

    const onTickIconAnimationEnd = useCallback(() => {
        nextPhase();
    }, []);

    const blocksIconContainerClasses = [
        styles.doubleColumnContainer,
        blocksIconState === "animation" ? styles.fadeOutAnimation : "",
        blocksIconState === "hidden" ? styles.hide : ""

    ].join(" ");

    const tickIconClassNames = [
        styles.tickIconFullScreen,
        tickIconState === "animation" ? styles.fadeInAnimation : "",
        tickIconState === "hidden" ? styles.hide : "",
        tickIconState === "visible" ? styles.show : "",
    ].join(" ");

    return (
        <div className={styles.singleColumnContainer}>
            <div className={blocksIconContainerClasses} onAnimationEnd={onBlocksAnimationEnd}>
                <BlockSelector gameRef={phaserGameRef} />
                <div className={styles.gameContainer} style={gameContainerDimensions}>
                    <PhaserGame ref={phaserGameRef} />
                </div>
            </div>
            <TickIcon className={tickIconClassNames} onAnimationEnd={onTickIconAnimationEnd} />
        </div>
    );
}
