From e61d061070ff3411bf1cb803b28d2cae63556327 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 24 Jun 2024 22:39:17 +0530
Subject: [PATCH] feat: left panel

---
 .../molecules/LeftSidePanelContent.tsx        | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/molecules/LeftSidePanelContent.tsx

diff --git a/src/components/molecules/LeftSidePanelContent.tsx b/src/components/molecules/LeftSidePanelContent.tsx
new file mode 100644
index 00000000..5c19996e
--- /dev/null
+++ b/src/components/molecules/LeftSidePanelContent.tsx
@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Box from "@mui/material/Box";
+import { Pair } from "./Pair";
+import { WhereWhatPair, WorkflowFile } from "@wbr-project/wbr-interpret";
+import { useSocketStore } from "../../context/socket";
+import { Add } from "@mui/icons-material";
+import { Socket } from "socket.io-client";
+import { AddButton } from "../atoms/buttons/AddButton";
+import { AddPair } from "../../api/workflow";
+import { GenericModal } from "../atoms/GenericModal";
+import { PairEditForm } from "./PairEditForm";
+import { Fab, Tooltip, Typography } from "@mui/material";
+
+interface LeftSidePanelContentProps {
+  workflow: WorkflowFile;
+  updateWorkflow: (workflow: WorkflowFile) => void;
+  recordingName: string;
+  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
+}
+
+export const LeftSidePanelContent = ({ workflow, updateWorkflow, recordingName, handleSelectPairForEdit}: LeftSidePanelContentProps) => {
+  const [activeId, setActiveId] = React.useState<number>(0);
+  const [breakpoints, setBreakpoints] = React.useState<boolean[]>([]);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  const { socket } = useSocketStore();
+
+  const activePairIdHandler = useCallback((data: string, socket: Socket) => {
+    setActiveId(parseInt(data) + 1);
+    // -1 is specially emitted when the interpretation finishes
+    if (parseInt(data) === -1) {
+      return;
+    }
+    socket.emit('activeIndex', data);
+  }, [activeId])
+
+  const addPair = (pair: WhereWhatPair, index: number) => {
+    AddPair((index - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+    setShowEditModal(false);
+  };
+
+  useEffect(() => {
+    socket?.on("activePairId", (data) => activePairIdHandler(data, socket));
+    return () => {
+      socket?.off("activePairId", (data) => activePairIdHandler(data, socket));
+    }
+  }, [socket, setActiveId]);
+
+
+  const handleBreakpointClick = (id: number) => {
+    setBreakpoints(oldBreakpoints => {
+      const newArray = [...oldBreakpoints, ...Array(workflow.workflow.length - oldBreakpoints.length).fill(false)];
+      newArray[id] = !newArray[id];
+      socket?.emit("breakpoints", newArray);
+      return newArray;
+    });
+  };
+
+  const handleAddPair = () => {
+    setShowEditModal(true);
+  };
+
+  return (
+    <div>
+      <Tooltip title='Add pair' placement='left' arrow>
+        <div style={{ float: 'right'}}>
+          <AddButton
+            handleClick={handleAddPair}
+            title=''
+            hoverEffect={false}
+            style={{color: 'white', background: '#1976d2'}}
+          />
+        </div>
+      </Tooltip>
+      <GenericModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+      >
+        <PairEditForm
+          onSubmitOfPair={addPair}
+          numberOfPairs={workflow.workflow.length}
+        />
+      </GenericModal>
+      <div>
+      {
+        workflow.workflow.map((pair, i, workflow, ) =>
+          <Pair
+            handleBreakpoint={() => handleBreakpointClick(i)}
+            isActive={ activeId === i + 1}
+            key={workflow.length - i}
+            index={workflow.length - i}
+            pair={pair}
+            updateWorkflow={updateWorkflow}
+            numberOfPairs={workflow.length}
+            handleSelectPairForEdit={handleSelectPairForEdit}
+          />)
+      }
+    </div>
+    </div>
+  );
+};