import style from "./style.module.css";
import { ReactComponent as OnTouchCogIcon } from "../assets/blocks/ontouchcog.svg";
import { ReactComponent as ForwardIcon } from "../assets/blocks/forward.svg";
import { ReactComponent as BackwardIcon } from "../assets/blocks/backward.svg";
import { ReactComponent as JumpIcon } from "../assets/blocks/jump.svg";
import Carousel from "./carousel";
import { PosterItem } from "../types";
import WheelFrame from "./wheel-frame";
import { IRefPhaserGame } from "../game/PhaserGame";
import { useState } from "react";
import { IRefPhaserGame as IRefPhaserGameTutorial } from "../tutorial-game/PhaserGame";

const repeat = (n: number, array: PosterItem[]) => {
    /* Repeats every element in the array until the array length = n */
    return Array(n).fill(array).flat().slice(0, n);
}

const posterItems: PosterItem[] = repeat(12, [
    { icon: ForwardIcon, block: "moveforward", execute: async () => true },
    { icon: BackwardIcon, block: "movebackward", execute: async () => true },
    { icon: JumpIcon, block: "jump", execute: async () => true },
]);

const staticBlockItems: PosterItem[] = repeat(12, [
    { icon: OnTouchCogIcon, block: "ontouchcog", execute: async () => true },
]);

interface BlockSelectorProps {
    gameRef: React.RefObject<IRefPhaserGame | IRefPhaserGameTutorial>;
}

export default function BlockSelector({ gameRef }: BlockSelectorProps) {
    const [hasBeenInteracted, setHasBeenInteracted] = useState(false);
    
    const onBlockChange = (item: PosterItem) => {
        if (!gameRef.current) return;
        const scene = gameRef.current.scene;
        if (!scene) return;
        scene.currentlySectedBlock = item;
    };

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