import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
// import Draggable from "react-draggable";
import styles from "./style.module.css";
import { MdKeyboardArrowUp, MdKeyboardArrowDown } from "react-icons/md";
import { MAIN_BLUE } from "../styles/colors";
export default function BlockSelector2({ gameRef, staticBlock, staticBlockItem, posterItems, snapPointFactors }) {
    const containerRef = useRef(null);
    const [containerHeight, setContainerHeight] = useState(0);
    const [position, setPosition] = useState();
    const snapPoints = snapPointFactors.map((factor) => containerHeight * factor);
    useEffect(() => {
        if (containerRef.current) {
            setContainerHeight(containerRef.current.offsetHeight);
        }
    }, [containerRef]);
    useEffect(() => {
        const position_ = { x: 0, y: containerHeight * .48 };
        setPosition(position_);
        const closestSnap = position_.y;
        const snapIndex = snapPoints.indexOf(closestSnap);
        if (snapIndex >= 0 && posterItems[snapIndex]) {
            onBlockChange(posterItems[snapIndex]);
        }
    }, [containerHeight]);
    const onBlockChange = (item) => {
        if (!gameRef.current || !gameRef.current.scene)
            return;
        switch (staticBlock) {
            case "left":
                gameRef.current.scene.selectedCogTiltLeftBlock = item;
                break;
            case "right":
                gameRef.current.scene.selectedCogTiltRightBlock = item;
                break;
        }
        // gameRef.current.scene.registerCogEvents();
    };
    // When drag stops, calculate the closest snap point and update position
    const handleStop = (e, data) => {
        // Find the snap point nearest to data.y
        const closestSnap = snapPoints.reduce((prev, curr) => Math.abs(curr - data.y) < Math.abs(prev - data.y) ? curr : prev);
        setPosition({ x: data.x, y: closestSnap });
        // update the game state based on the selected index:
        const snapIndex = snapPoints.indexOf(closestSnap);
        if (snapIndex >= 0 && posterItems[snapIndex]) {
            onBlockChange(posterItems[snapIndex]);
        }
    };
    // Helper to get the current snap index from the current y position.
    const getCurrentSnapIndex = () => {
        if (!position)
            return 0;
        const index = snapPoints.findIndex((point) => point === position.y);
        if (index === -1) {
            // If not exactly at a snap point, find the nearest one.
            let nearestIndex = 0;
            let smallestDiff = Math.abs(snapPoints[0] - position.y);
            for (let i = 1; i < snapPoints.length; i++) {
                const diff = Math.abs(snapPoints[i] - position.y);
                if (diff < smallestDiff) {
                    smallestDiff = diff;
                    nearestIndex = i;
                }
            }
            return nearestIndex;
        }
        return index;
    };
    const handleArrowUpClick = () => {
        if (!position)
            return;
        const currentIndex = getCurrentSnapIndex();
        if (currentIndex > 0) {
            const newIndex = currentIndex - 1;
            setPosition({ x: position.x, y: snapPoints[newIndex] });
            if (posterItems[newIndex])
                onBlockChange(posterItems[newIndex]);
        }
    };
    const handleArrowDownClick = () => {
        if (!position)
            return;
        const currentIndex = getCurrentSnapIndex();
        if (currentIndex < snapPoints.length - 1) {
            const newIndex = currentIndex + 1;
            setPosition({ x: position.x, y: snapPoints[newIndex] });
            if (posterItems[newIndex])
                onBlockChange(posterItems[newIndex]);
        }
    };
    return (_jsxs("div", { className: styles.outerContainer, children: [_jsx("div", { className: styles.upArrowContainer, onClick: handleArrowUpClick, children: _jsx(MdKeyboardArrowUp, { color: MAIN_BLUE, size: 40 }) }), _jsxs("div", { ref: containerRef, className: styles.carouselBody, children: [_jsx("div", { className: styles.staticBlockItem, children: position && _jsx(staticBlockItem.icon, { className: styles.staticBlockItemIcon }) }), posterItems.map((item, index) => (_jsx("div", { className: styles.carouselItem, children: _jsx(item.icon, { className: styles.carouselItemIcon }) }, index)))] }), _jsx("div", { className: styles.downArrowContainer, onClick: handleArrowDownClick, children: _jsx(MdKeyboardArrowDown, { color: MAIN_BLUE, size: 40 }) })] }));
}
