From 439f91788470c26032912d37738a60eb3969c242 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 17:34:55 +0530
Subject: [PATCH] Refactor Trigger component: pass selectedPointData and type
 props, enhance state management for triggers, and streamline rendering logic
 for better performance.

---
 .../mechanics/conveyorMechanics.tsx           |   2 +-
 .../eventProperties/trigger/Trigger.tsx       | 237 +++++++++---------
 2 files changed, 117 insertions(+), 122 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
index ded65af..a6a1fa9 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -271,7 +271,7 @@ function ConveyorMechanics() {
                     </div>
                 </div>
                 <div className="tirgger">
-                    <Trigger />
+                    <Trigger selectedPointData={selectedPointData as any} type= {'Conveyor'}/>
                 </div>
             </section>
         </>
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 1434446..86e4e7b 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -1,137 +1,132 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
-  AddIcon,
-  RemoveIcon,
-  ResizeHeightIcon,
+    AddIcon,
+    RemoveIcon,
+    ResizeHeightIcon,
 } from "../../../../../icons/ExportCommonIcons";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
+import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
 
-const Trigger: React.FC = () => {
-  // State to hold the list of triggers
-  const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
-  const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
-  const [activeOption, setActiveOption] = useState("onComplete");
-  const triggersContainerRef = useRef<HTMLDivElement>(null);
+type TriggerProps = {
+    selectedPointData?: PointsScheme | undefined;
+    type?: 'Conveyor' | 'Vehicle' | 'RoboticArm' | 'Machine' | 'StorageUnit';
+};
 
-  // States for dropdowns
-  const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
-  const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
-  const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
+const Trigger = ({ selectedPointData, type }: TriggerProps) => {
+    const [currentAction, setCurrentAction] = useState<string | undefined>();
+    const { selectedProduct } = useSelectedProduct();
+    const { getActionByUuid } = useProductStore();
+    const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
+    const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
+    const [activeOption, setActiveOption] = useState("onComplete");
+    const triggersContainerRef = useRef<HTMLDivElement>(null);
 
-  // Function to handle adding a new trigger
-  const addTrigger = (): void => {
-    const newTrigger = `Trigger ${triggers.length + 1}`;
-    setTriggers([...triggers, newTrigger]); // Add new trigger to the state
+    useEffect(() => {
+        if (!selectedPointData) return;
+        if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
+            setCurrentAction((selectedPointData as ConveyorPointSchema).action.actionUuid);
+        }
+    }, [selectedPointData]);
 
-    // Initialize the states for the new trigger
-    setTriggeredModel([...triggeredModel, ""]);
-    setTriggeredPoint([...triggeredPoint, ""]);
-    setTriggeredAction([...triggeredAction, ""]);
-  };
+    useEffect(() => {
+        if (!currentAction || !selectedProduct) return;
+        const action = getActionByUuid(selectedProduct.productId, currentAction);
+        setTriggers(action?.triggers || []);
+        setSelectedTrigger(action?.triggers[0] || undefined);
+    }, [currentAction, selectedProduct]);
 
-  // Function to handle removing a trigger
-  const removeTrigger = (index: number): void => {
-    setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
-    setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
-    setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
-    setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
-  };
+    const addTrigger = (): void => {
+    };
 
-  return (
-    <div className="trigger-wrapper">
-      <div className="header">
-        <div className="title">Trigger</div>
-        <button
-          className="add-button"
-          onClick={addTrigger}
-          style={{ cursor: "pointer" }}
-        >
-          <AddIcon /> Add
-        </button>
-      </div>
-      <div className="trigger-list">
-        <div
-          className="lists-main-container"
-          ref={triggersContainerRef}
-          style={{ height: "120px" }}
-        >
-          <div className="list-container">
-            {triggers.map((trigger: any, index: number) => (
-              <div
-                key={index}
-                className={`list-item ${
-                  selectedTrigger === trigger ? "active" : ""
-                }`}
-                onClick={() => setSelectedTrigger(trigger)}
-              >
-                <button className="value" onClick={() => {}}>
-                  <RenameInput value={trigger} onRename={() => {}} />
+    const removeTrigger = (triggerUuid: string): void => {
+    };
+
+    const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
+    const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
+    const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
+
+    return (
+        <div className="trigger-wrapper">
+            <div className="header">
+                <div className="title">Trigger</div>
+                <button
+                    className="add-button"
+                    onClick={addTrigger}
+                    style={{ cursor: "pointer" }}
+                >
+                    <AddIcon /> Add
                 </button>
-                {triggers.length > 1 && (
-                  <button
-                    className="remove-button"
-                    onClick={() => removeTrigger(index)}
-                  >
-                    <RemoveIcon />
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-          <button
-            className="resize-icon"
-            id="action-resize"
-            onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
-          >
-            <ResizeHeightIcon />
-          </button>
+            </div>
+            <div className="trigger-list">
+                <div
+                    className="lists-main-container"
+                    ref={triggersContainerRef}
+                    style={{ height: "120px" }}
+                >
+                    <div className="list-container">
+                        {triggers.map((trigger) => (
+                            <div
+                                key={trigger.triggerUuid}
+                                className={`list-item ${selectedTrigger?.triggerUuid === trigger.triggerUuid ? "active" : ""}`}
+                                onClick={() => setSelectedTrigger(trigger)}
+                            >
+                                <button className="value" onClick={() => { }}>
+                                    <RenameInput value={trigger.triggerName} onRename={() => { }} />
+                                </button>
+                                {triggers.length > 1 && (
+                                    <button
+                                        className="remove-button"
+                                        onClick={() => removeTrigger(trigger.triggerUuid)}
+                                    >
+                                        <RemoveIcon />
+                                    </button>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    <button
+                        className="resize-icon"
+                        id="action-resize"
+                        onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
+                    >
+                        <ResizeHeightIcon />
+                    </button>
+                </div>
+                <div className="trigger-item">
+                    <div className="trigger-name">{selectedTrigger?.triggerName}</div>
+                    <LabledDropdown
+                        label="Trigger Type"
+                        defaultOption={activeOption}
+                        options={["onComplete", "onStart", "onStop", "delay"]}
+                        onSelect={(option) => setActiveOption(option)}
+                    />
+                    <div className="trigger-options">
+                        <LabledDropdown
+                            label="Triggered Object"
+                            defaultOption={triggeredModel.modelName}
+                            options={[]}
+                            onSelect={(option) => { }}
+                        />
+                        <LabledDropdown
+                            label="Triggered Point"
+                            defaultOption={triggeredPoint.pointName}
+                            options={[]}
+                            onSelect={(option) => { }}
+                        />
+                        <LabledDropdown
+                            label="Triggered Action"
+                            defaultOption={triggeredAction.actionName}
+                            options={[]}
+                            onSelect={(option) => { }}
+                        />
+                    </div>
+                </div>
+            </div>
         </div>
-        <div className="trigger-item">
-          <div className="trigger-name">{selectedTrigger}</div>
-          <LabledDropdown
-            label="Trigger on"
-            defaultOption={activeOption}
-            options={["onComplete", "onStart", "onStop", "delay"]}
-            onSelect={(option) => setActiveOption(option)}
-          />
-          <div className="trigger-options">
-            <LabledDropdown
-              label="Triggered Object"
-              defaultOption={triggeredModel[0] || "Select Model"}
-              options={["Model 1", "Model 2", "Model 3"]}
-              onSelect={(option) => {
-                const newModel = [...triggeredModel];
-                newModel[0] = option;
-                setTriggeredModel(newModel);
-              }}
-            />
-            <LabledDropdown
-              label="Triggered Point"
-              defaultOption={triggeredPoint[0] || "Select Point"}
-              options={["Point 1", "Point 2", "Point 3"]}
-              onSelect={(option) => {
-                const newPoint = [...triggeredPoint];
-                newPoint[0] = option;
-                setTriggeredPoint(newPoint);
-              }}
-            />
-            <LabledDropdown
-              label="Triggered Action"
-              defaultOption={triggeredAction[0] || "Select Action"}
-              options={["Action 1", "Action 2", "Action 3"]}
-              onSelect={(option) => {
-                const newAction = [...triggeredAction];
-                newAction[0] = option;
-                setTriggeredAction(newAction);
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default Trigger;