import { useEffect, useState } from "react";
import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import ArmBotUI from "../ui/arm/armBotUI";
import RoboticArmInstances from "./instances/roboticArmInstances";

function RoboticArm() {
    const { armBots, getArmBotById } = useArmBotStore();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { isPlaying } = usePlayButtonStore();
    const [isArmBotSelected, setIsArmBotSelected] = useState(false);

    useEffect(() => {
        // console.log('armBots: ', armBots);
    }, [armBots])

    useEffect(() => {
        if (selectedEventSphere) {
            const selectedArmBot = getArmBotById(selectedEventSphere.userData.modelUuid);
            if (selectedArmBot) {
                setIsArmBotSelected(true);
            } else {
                setIsArmBotSelected(false);
            }
        }
    }, [selectedEventSphere])

    return (
        <>

            <RoboticArmInstances />

            {isArmBotSelected && !isPlaying &&
                < ArmBotUI />
            }

        </>
    );
}

export default RoboticArm;