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 { PosterItem } from "../types";

type Props = {
    nextPhase: () => void;
    BlocksConnectedIcon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
    initialBlock: PosterItem;
};

export function GenericPhase({ nextPhase, BlocksConnectedIcon, initialBlock }: 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);

    const cogClickedCounter = useRef(0);
    const cogJumpedCounter = useRef(0);

    const onCogButtonClick = useCallback(() => {
        cogClickedCounter.current++;
        if (cogClickedCounter.current === 3) {
            setBlocksIconState("animation");
            phaserGameRef.current?.game?.destroy(true);
        }
    }, []);

    // useEffect(() => {
    //     const connectedCog = getConnectedCog();
    //     if (connectedCog) {
    //         const eventName = (connectedCog as Cog).publishedDataAnalyser.eventsMap.buttonClick.release;
    //         (connectedCog as Cog).publishedDataAnalyser.addListener(eventName, onCogButtonClick);

    //         return () => {
    //             (connectedCog as Cog).publishedDataAnalyser.removeListener(eventName, onCogButtonClick);
    //         };
    //     }
    // }, []);

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

            if (sky.scene) {
                sky.scene.currentlySectedBlock = initialBlock;
            }
        });

        EventBus.once('player-off-screen', () => {
            setBlocksIconState("animation");
            phaserGameRef.current?.game?.destroy(true);
        });

        EventBus.on('player-jumped', () => {
            cogJumpedCounter.current++;
            if (cogJumpedCounter.current === 3) {
                setTimeout(() => {
                    setBlocksIconState("animation");
                    phaserGameRef.current?.game?.destroy(true);
                }, 1500);
            }
        });

        return () => {
            EventBus.removeListener('sky-ready');
            EventBus.removeListener('player-off-screen');
            EventBus.removeListener('player-jumped');
        }
    }, [initialBlock]);

    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}>
                <BlocksConnectedIcon className={styles.blocksConnectedIcon} />
                <div className={styles.gameContainer} style={gameContainerDimensions}>
                    <PhaserGame ref={phaserGameRef} />
                </div>
            </div>
            <TickIcon className={tickIconClassNames} onAnimationEnd={onTickIconAnimationEnd} />
        </div>
    );
}
