Dwinzo_dev/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx

import React, { useRef, useMemo, useCallback, useState } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import {
    useSelectedActionSphere,
    useSimulationStates,
    useSocketStore
} from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes';
import LabeledButton from "../../../ui/inputs/LabledButton";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";

const ArmBotMechanics: React.FC = () => {
    const { selectedActionSphere } = useSelectedActionSphere();
    const { simulationStates, setSimulationStates } = useSimulationStates();
    const { socket } = useSocketStore();
    const [selectedTrigger, setSelectedTrigger] = useState<string | null>(null);

    const propertiesContainerRef = useRef<HTMLDivElement>(null);

    // Get connected models for dropdowns
    const connectedModels = useMemo(() => {
        if (!selectedActionSphere?.points?.uuid) return [];

    }, [selectedActionSphere, simulationStates]);

    // Get triggers only from connected models
    const connectedTriggers = useMemo(() => {
    }, [connectedModels, simulationStates]);

    const { selectedPoint } = useMemo(() => {
        if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null };

        const armBotPaths = simulationStates.filter(
            (path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
        );

        const points = armBotPaths.find(
            (path) => path.points.uuid === selectedActionSphere.points.uuid
        )?.points;

        return {
            selectedPoint: points || null
        };
    }, [selectedActionSphere, simulationStates]);

    const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => {
        // if (!updatedPath) return;
        // const email = localStorage.getItem("email");
        // const organization = email ? email.split("@")[1].split(".")[0] : "";

        // const data = {
        //     organization: organization,
        //     modeluuid: updatedPath.modeluuid,
        //     eventData: { type: "ArmBot", points: updatedPath.points }
        // }

        // socket.emit('v2:model-asset:updateEventData', data);
    }

    // const handleActionUpdate = useCallback((updatedAction: Partial<Types.ArmBotEventsSchema['points']['actions']>) => {
    //     if (!selectedActionSphere?.points?.uuid) return;

    //     const updatedPaths = simulationStates.map((path) => {
    //         return path;
    //     });

    //     const updatedPath = updatedPaths.find(
    //         (path): path is Types.ArmBotEventsSchema =>
    //             path.type === "ArmBot" &&
    //             path.points.uuid === selectedActionSphere.points.uuid
    //     );
    //     updateBackend(updatedPath);

    //     setSimulationStates(updatedPaths);
    // }, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);

    // const handleSpeedChange = useCallback((speed: number) => {
    //     handleActionUpdate({ speed });
    // }, [handleActionUpdate]);

    // const handleProcessChange = useCallback((processes: Types.ArmBotEventsSchema['points']['actions']['processes']) => {
    //     handleActionUpdate({ processes });
    // }, [handleActionUpdate]);

    // const handleTriggerSelect = useCallback((displayName: string) => {
    //     const selected = connectedTriggers.find(t => t.displayName === displayName);
    //     setSelectedTrigger(selected?.uuid || null);
    // }, [connectedTriggers]);

    // const handleStartPointSelect = useCallback((pointUUID: string) => {
    //     if (!selectedTrigger || !selectedPoint) return;

    //     const updatedProcesses = selectedPoint.actions.processes?.map(process =>
    //         process.triggerId === selectedTrigger
    //             ? { ...process, startPoint: pointUUID }
    //             : process
    //     ) || [];

    //     handleProcessChange(updatedProcesses);
    // }, [selectedTrigger, selectedPoint, handleProcessChange]);

    // const handleEndPointSelect = useCallback((pointUUID: string) => {
    //     if (!selectedTrigger || !selectedPoint) return;

    //     const updatedProcesses = selectedPoint.actions.processes?.map(process =>
    //         process.triggerId === selectedTrigger
    //             ? { ...process, endPoint: pointUUID }
    //             : process
    //     ) || [];

    //     handleProcessChange(updatedProcesses);
    // }, [selectedTrigger, selectedPoint, handleProcessChange]);

    // const getCurrentProcess = useCallback(() => {
    //     if (!selectedTrigger || !selectedPoint) return null;
    //     return selectedPoint.actions.processes?.find(p => p.triggerId === selectedTrigger);
    // }, [selectedTrigger, selectedPoint]);

    return (
        <div className="machine-mechanics-container" key={selectedPoint?.uuid}>
            <div className="machine-mechanics-header">
                {selectedActionSphere?.path?.modelName || "ArmBot point not found"}
            </div>

            <div className="machine-mechanics-content-container">
                <div className="selected-properties-container" ref={propertiesContainerRef}>
                    <div className="properties-header">ArmBot Properties</div>

                    {/* {selectedPoint && (
                        <>
                            <InputWithDropDown
                                key={`speed-${selectedPoint.uuid}`}
                                label="ArmBot Speed"
                                value={selectedPoint.actions.speed.toString()}
                                onChange={(value) => handleSpeedChange(parseInt(value))}
                            />

                            <LabledDropdown
                                key={`trigger-select-${selectedPoint.uuid}`}
                                label="Select Trigger"
                                defaultOption={connectedTriggers.find(t => t.uuid === selectedTrigger)?.displayName || ''}
                                onSelect={handleTriggerSelect}
                                options={connectedTriggers.map(trigger => trigger.displayName)}
                            />

                            {selectedTrigger && (
                                <>
                                    <LabledDropdown
                                        key={`start-point-${selectedTrigger}`}
                                        label="Start Point"
                                        defaultOption={getCurrentProcess()?.startPoint || ''}
                                        onSelect={handleStartPointSelect}
                                        options={connectedModels.map((model, index) => `${model.modelName} [${index}]`)}
                                    />

                                    <LabledDropdown
                                        key={`end-point-${selectedTrigger}`}
                                        label="End Point"
                                        defaultOption={getCurrentProcess()?.endPoint || ''}
                                        onSelect={handleEndPointSelect}
                                        options={connectedModels.map((model, index) => `${model.modelName} [${index}]`)}
                                    />

                                </>
                            )}
                        </>
                    )} */}
                </div>

                <div className="footer">
                    <InfoIcon />
                    Configure ArmBot properties and trigger-based processes.
                </div>
            </div>
        </div>
    );
};

export default React.memo(ArmBotMechanics);