auto select and edit

src/pages/setting/personality/store/Store.ts

@@ -7,9 +7,11 @@ import {
   TextType,
   ButtonType,
   ImageType,
+  SocialType,
   SectionName,
   HorizontalAlignment,
   VerticalAlignment,
+  SelectedElement,
 } from "../types/Types";
 
 export const usePersonalityStore = create<PersonalityStore>((set) => ({
@@ -21,11 +23,45 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
 
   activeSection: "",
   activeItemIndex: 0,
+  selectedElement: null,
+  isEditMode: false,
 
   setActiveSection: (section: SectionName) =>
-    set({ activeSection: section, activeItemIndex: 0 }),
+    set((state) => {
+      console.log("🏪 Store - setActiveSection called:", {
+        newSection: section,
+        oldSection: state.activeSection,
+        oldItemIndex: state.activeItemIndex,
+        newItemIndex: 0,
+      });
 
-  setActiveItemIndex: (index: number) => set({ activeItemIndex: index }),
+      return {
+        activeSection: section,
+        activeItemIndex: 0,
+        selectedElement: null,
+        isEditMode: false,
+      };
+    }),
+
+  setActiveItemIndex: (index: number) =>
+    set((state) => {
+      console.log("🏪 Store - setActiveItemIndex called:", {
+        newIndex: index,
+        oldIndex: state.activeItemIndex,
+        currentSection: state.activeSection,
+      });
+
+      return {
+        activeItemIndex: index,
+        selectedElement: null,
+        isEditMode: false,
+      };
+    }),
+
+  setSelectedElement: (element: SelectedElement) =>
+    set({ selectedElement: element, isEditMode: !!element }),
+
+  setEditMode: (isEdit: boolean) => set({ isEditMode: isEdit }),
 
   setColumnsCount: (
     sectionKey: keyof PersonalityDataType,
@@ -42,6 +78,7 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
             texts: [],
             buttons: [],
             images: [],
+            socials: [],
             alignment: HorizontalAlignment.CENTER,
             verticalAlignment: VerticalAlignment.MIDDLE,
           }
@@ -373,4 +410,181 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
         },
       },
     })),
+
+  deleteText: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    textId: string
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  texts: item.texts.filter((text) => text.id !== textId),
+                }
+              : item
+          ),
+        },
+      },
+      selectedElement: null,
+      isEditMode: false,
+    })),
+
+  deleteButton: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    buttonId: string
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  buttons: item.buttons.filter(
+                    (button) => button.id !== buttonId
+                  ),
+                }
+              : item
+          ),
+        },
+      },
+      selectedElement: null,
+      isEditMode: false,
+    })),
+
+  deleteImage: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    imageId: string
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  images: item.images.filter((image) => image.id !== imageId),
+                }
+              : item
+          ),
+        },
+      },
+      selectedElement: null,
+      isEditMode: false,
+    })),
+
+  addSocial: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    social: Omit<SocialType, "id">
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  socials: [...item.socials, { ...social, id: uuidv4() }],
+                }
+              : item
+          ),
+        },
+      },
+    })),
+
+  addSocialToActiveItem: (social: Omit<SocialType, "id">) =>
+    set((state) => {
+      if (!state.activeSection) return state;
+
+      const sectionKey = state.activeSection as keyof PersonalityDataType;
+      const items = state.data[sectionKey].items;
+      const activeIndex = state.activeItemIndex;
+
+      if (activeIndex >= items.length) return state;
+
+      const updatedItems = items.map((item, index) =>
+        index === activeIndex
+          ? {
+              ...item,
+              socials: [...item.socials, { ...social, id: uuidv4() }],
+            }
+          : item
+      );
+
+      return {
+        data: {
+          ...state.data,
+          [sectionKey]: {
+            ...state.data[sectionKey],
+            items: updatedItems,
+          },
+        },
+      };
+    }),
+
+  updateSocial: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    socialId: string,
+    updates: Partial<SocialType>
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  socials: item.socials.map((social) =>
+                    social.id === socialId ? { ...social, ...updates } : social
+                  ),
+                }
+              : item
+          ),
+        },
+      },
+    })),
+
+  deleteSocial: (
+    sectionKey: keyof PersonalityDataType,
+    itemId: string,
+    socialId: string
+  ) =>
+    set((state) => ({
+      data: {
+        ...state.data,
+        [sectionKey]: {
+          ...state.data[sectionKey],
+          items: state.data[sectionKey].items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  socials: item.socials.filter(
+                    (social) => social.id !== socialId
+                  ),
+                }
+              : item
+          ),
+        },
+      },
+      selectedElement: null,
+      isEditMode: false,
+    })),
 }));