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


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

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

    useEffect(() => {
        if (!gameRef.current || !gameRef.current.scene) return;
        if (gameRef.current.scene.controls.selectedLeftBlock) return;
        if (gameRef.current.scene.controls.selectedRightBlock) return;
        if (gameRef.current.scene.controls.selectedUpBlock) return;
        if (gameRef.current.scene.controls.selectedDownBlock) return;
        const item = posterItems[0];
        switch (staticBlock) {
            case "left":
                gameRef.current.scene.controls.selectedLeftBlock = item.block;
                break;
            case "right":
                gameRef.current.scene.controls.selectedRightBlock = item.block;
                break;
            case "up":
                gameRef.current.scene.controls.selectedUpBlock = item.block;
                break;
            case "down":
                gameRef.current.scene.controls.selectedDownBlock = item.block;
                break;
        }
        gameRef.current.scene.controls.registerCogEvents();
    }, [gameRef.current]);

    const onBlockChange = (item: PosterItem) => {
        if (!gameRef.current || !gameRef.current.scene) return;
        switch (staticBlock) {
            case "left":
                gameRef.current.scene.controls.selectedLeftBlock = item.block;
                break;
            case "right":
                gameRef.current.scene.controls.selectedRightBlock = item.block;
                break;
            case "up":
                gameRef.current.scene.controls.selectedUpBlock = item.block;
                break;
            case "down":
                gameRef.current.scene.controls.selectedDownBlock = item.block;
                break;
        }
        gameRef.current.scene.controls.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>
    );
}
