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

function RoboticArm() {
    const { armBots, addArmBot, clearArmBots } = useArmBotStore();
    const { products, getProductById } = useProductStore();
    const { selectedProduct } = useSelectedProduct();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { selectedEventData } = useSelectedEventData();
    const { isPlaying } = usePlayButtonStore();

    useEffect(() => {
        if (selectedProduct.productId) {
            const product = getProductById(selectedProduct.productId);
            if (product) {
                clearArmBots();
                product.eventDatas.forEach(events => {
                    if (events.type === 'roboticArm') {
                        addArmBot(selectedProduct.productId, events);
                    }
                });
            }
        }
    }, [selectedProduct, products]);

    useEffect(() => {
    }, [armBots])

    useEffect(() => {

    }, [selectedEventData, selectedEventSphere, isPlaying]);

    return (
        <>
            <RoboticArmInstances />
            {selectedEventSphere && selectedEventData?.data.type === "roboticArm" &&
                < ArmBotUI />
            }
        </>
    );
}

export default RoboticArm;