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: "left" | "right" | "shoot";
    posterItems: PosterItem[];
    staticBlockItems: PosterItem[];
    onSelectionChange?: (staticBlock: "left" | "right" | "shoot", item: PosterItem) => void;
}

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

    useEffect(() => {
        if (!gameRef.current || !gameRef.current.scene || !posterItems.length) return;
        const scene = gameRef.current.scene;
        const currentSelection =
            staticBlock === "left" ? scene.selectedCogTiltLeftBlock
                : staticBlock === "right" ? scene.selectedCogTiltRightBlock
                    : scene.selectedCogFireBlock;

        if (currentSelection) {
            onSelectionChange?.(staticBlock, currentSelection);
            return;
        }

        const item = posterItems[0];
        switch (staticBlock) {
            case "left":
                scene.selectedCogTiltLeftBlock = item;
                break;
            case "right":
                scene.selectedCogTiltRightBlock = item;
                break;
            case "shoot":
                scene.selectedCogFireBlock = item;
                break;
        }
        onSelectionChange?.(staticBlock, item);
        // gameRef.current.scene.registerCogEvents();
    }, [gameRef.current, onSelectionChange, posterItems, staticBlock]);

    const onBlockChange = (item: PosterItem) => {
        if (!item) return;
        if (!gameRef.current || !gameRef.current.scene) return;
        const scene = gameRef.current.scene;
        const currentSelection =
            staticBlock === "left" ? scene.selectedCogTiltLeftBlock
                : staticBlock === "right" ? scene.selectedCogTiltRightBlock
                    : scene.selectedCogFireBlock;

        if (currentSelection?.block === item.block) {
            return;
        }

        switch (staticBlock) {
            case "left":
                scene.selectedCogTiltLeftBlock = item;
                break;
            case "right":
                scene.selectedCogTiltRightBlock = item;
                break;
            case "shoot":
                scene.selectedCogFireBlock = item;
                break;
        }
        onSelectionChange?.(staticBlock, item);
        // 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>
    );
}
