import style from "./style.module.css";
import Carousel from "./carousel";
import { PosterItem } from "../types";
import WheelFrame from "./wheel-frame";
import { IRefPhaserGame } from "../game/PhaserGame";
import { useEffect, useState } from "react";
import { IRefPhaserGame as IRefPhaserGameTutorial } from "../tutorial-game/PhaserGame";

interface BlockSelectorProps {
    gameRef: React.RefObject<IRefPhaserGame | IRefPhaserGameTutorial>;
    staticBlock: "up" | "down";
    posterItems: PosterItem[];
    staticBlockItems: PosterItem[];
}

export default function BlockSelector({ gameRef, staticBlock, staticBlockItems, posterItems }: BlockSelectorProps) {
    const [hasBeenInteracted, setHasBeenInteracted] = useState(false);

    useEffect(() => {
        if (!gameRef.current || !gameRef.current.scene) return;
        if (gameRef.current.scene.selectedCogClickedBlock) return;
        if (gameRef.current.scene.selectedCogNoClickBlock) return;
        const item = posterItems[0];
        switch (staticBlock) {
            case "up":
                gameRef.current.scene.selectedCogClickedBlock = item;
                break;
            case "down":
                gameRef.current.scene.selectedCogNoClickBlock = item;
                break;
        }
        // gameRef.current.scene.registerCogEvents();
    }, [gameRef.current]);

    const onBlockChange = (item: PosterItem) => {
        if (!gameRef.current || !gameRef.current.scene) return;
        switch (staticBlock) {
            case "up":
                gameRef.current.scene.selectedCogClickedBlock = item;
                break;
            case "down":
                gameRef.current.scene.selectedCogNoClickBlock = item;
                break;
        }
        // gameRef.current.scene.registerCogEvents();
    };

    const clickHandler = () => {
        setHasBeenInteracted(true);
    }


    return (
        <div className={[style.blockSelector, hasBeenInteracted ? "" : style.uninteracted].join(" ")} onClick={clickHandler}>
            <div className={style.carouselContainer}>
                <WheelFrame
                    Carusel={Carousel}
                    onFrontPosterChange={(item) => { }}
                    posterItems={staticBlockItems}
                    isStatic={true}
                />
            </div>
            <div className={style.carouselContainer}>
                <WheelFrame
                    Carusel={Carousel}
                    onFrontPosterChange={onBlockChange}
                    posterItems={posterItems}
                />
            </div>
        </div>
    );
}
