import { create } from "zustand";
import { ReactNode } from "react";
import { persist } from "zustand/middleware";

interface DrawerState {
  isOpen?: boolean | null | string | undefined;
  title?: string;
  content?: ReactNode | null;
  direction?: string | null;
}

interface UseDrawerStore {
  drawerState: DrawerState;
  openDrawer: (args: {
    title?: string;
    content?: ReactNode;
    direction?: string;
    isOpen?: boolean;
  }) => void;
  closeDrawer: () => void;
}

export const useDrawerStore = create<UseDrawerStore>((set) => ({
  drawerState: {
    isOpen: false,
    title: "",
    content: null,
    direction: null,
  },
  openDrawer: ({ title, content, direction }) =>
    set({
      drawerState: {
        isOpen: true,
        title,
        content,
        direction: direction || null,
      },
    }),
  closeDrawer: () =>
    set({
      drawerState: {
        isOpen: false,
        title: "",
        content: null,
        direction: null,
      },
    }),
}));

interface UseBackdropStore {
  isOpen: boolean;
  openBackdrop: () => void;
  closeBackdrop: () => void;
}

export const useBackdropStore = create<UseBackdropStore>((set) => ({
  isOpen: false,
  openBackdrop: () => set({ isOpen: true }),
  closeBackdrop: () => set({ isOpen: false }),
}));

interface UseModalStore {
  isOpen?: boolean;
  isFullSize?: boolean;
  title: string;
  content: ReactNode | null;
  openModal: (args: {
    title: string;
    content: ReactNode;
    isFullSize?: boolean;
  }) => void;
  updateModalContent: (content: ReactNode) => void;
  closeModal: () => void;
}

export const useModalStore = create<UseModalStore>((set) => ({
  isOpen: false,
  isFullSize: false,
  title: "",
  content: null,
  openModal: ({ title, content, isFullSize }) =>
    set({ isOpen: true, title, content, isFullSize: isFullSize || false }),
  updateModalContent: (content) =>
    set((state) => (state.isOpen ? { content } : {})),
  closeModal: () => set({ isOpen: false }),
}));

interface UseSideBarStore {
  isSideBarOpen?: boolean;
  toggleSideBar: (args: { state: boolean }) => void;
}

export const useSideBarStore = create<UseSideBarStore>((set) => ({
  isSideBarOpen: true,
  toggleSideBar: ({ state }) => set({ isSideBarOpen: state }),
}));

interface TabState {
  activeTabs: Record<
    string,
    {
      index: number;
      path: string;
      label: string;
    }
  >;
}

interface UseTabStore {
  tabState: TabState;
  setActiveTab: (args: {
    index: number;
    path: string;
    label: string;
    tabKey: string;
  }) => void;
  clearTabState: () => void;
}

export const useTabStore = create<UseTabStore>()(
  persist(
    (set) => ({
      tabState: {
        activeTabs: {},
      },
      setActiveTab: ({ index, path, label, tabKey }) =>
        set((state) => ({
          tabState: {
            activeTabs: {
              ...state.tabState.activeTabs,
              [tabKey]: { index, path, label },
            },
          },
        })),
      clearTabState: () =>
        set({
          tabState: {
            activeTabs: {},
          },
        }),
    }),
    {
      name: "tab-storage",
    }
  )
);


