From d047eaa1df73e44e7c3b8ebce4fc615912872013 Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Tue, 3 Sep 2024 13:21:08 +0200
Subject: [PATCH] Create a property to let the user select the ActiveTab

---
 .../tabsbar/tabsbar-shape.tsx                 |  4 ++-
 src/core/model/index.ts                       |  1 +
 src/pods/canvas/canvas.model.ts               |  4 +++
 src/pods/properties/properties.pod.tsx        | 32 +++++++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/common/components/front-components/tabsbar/tabsbar-shape.tsx b/src/common/components/front-components/tabsbar/tabsbar-shape.tsx
index bbca35bd..e5c53401 100644
--- a/src/common/components/front-components/tabsbar/tabsbar-shape.tsx
+++ b/src/common/components/front-components/tabsbar/tabsbar-shape.tsx
@@ -48,6 +48,8 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { handleSelection } = useShapeComponentSelection(props, shapeType);
 
+  const activeTab = otherProps?.activeTab ?? 0;
+
   return (
     <Group
       x={x}
@@ -74,7 +76,7 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
           <Rect
             width={tabWidth}
             height={tabHeight}
-            fill={index === 0 ? 'white' : '#E0E0E0'} // First tab is selected
+            fill={index === activeTab ? 'white' : '#E0E0E0'} // First tab is selected
             stroke="black"
             strokeWidth={1}
           />
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index eb7956c5..87224763 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -160,6 +160,7 @@ export interface OtherProps {
   imageBlackAndWhite?: boolean;
   progress?: string;
   borderRadius?: string;
+  activeTab?: number;
 }
 
 export const BASE_ICONS_URL = '/icons/';
diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
index 5e28fea0..22f7bbc9 100644
--- a/src/pods/canvas/canvas.model.ts
+++ b/src/pods/canvas/canvas.model.ts
@@ -511,6 +511,10 @@ export const generateDefaultOtherProps = (
         progress: '50',
         backgroundColor: '#A9A9A9',
       };
+    case 'tabsbar':
+      return {
+        activeTab: 0,
+      };
     default:
       return undefined;
   }
diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
index 963b8a5d..5bebaee5 100644
--- a/src/pods/properties/properties.pod.tsx
+++ b/src/pods/properties/properties.pod.tsx
@@ -29,6 +29,21 @@ export const PropertiesPod = () => {
 
   const selectedShapeData = getSelectedShapeData();
 
+  // Function to parse the tabsbar text and get the names of the tabs
+  const parseTabsBarText = (text: string): string[] => {
+    return text
+      .trim()
+      .split(',')
+      .map(row => row.trim());
+  };
+
+  // Checking whether the type is tabsbar and parsing the text
+  const isTabsBar = selectedShapeData?.type === 'tabsbar';
+  const tabs =
+    isTabsBar && selectedShapeData?.text
+      ? parseTabsBarText(selectedShapeData.text)
+      : [];
+
   return (
     <div>
       <div className={classes.title}>
@@ -126,6 +141,23 @@ export const PropertiesPod = () => {
           }
         />
       )}
+      {isTabsBar && (
+        <div>
+          <label>Active Tab</label>
+          <select
+            value={selectedShapeData?.otherProps?.activeTab}
+            onChange={e =>
+              updateOtherPropsOnSelected('activeTab', Number(e.target.value))
+            }
+          >
+            {tabs.map((tab, index) => (
+              <option key={index} value={index}>
+                {tab}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
     </div>
   );
 };