import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface UIState {
  isSidebarCollapsed: boolean
  isNavigationSubMenuExpanded: boolean
  setSidebarCollapsed: (collapsed: boolean) => void
  toggleSidebar: () => void
  setNavigationSubMenuExpanded: (expanded: boolean) => void
  toggleNavigationSubMenu: () => void
}

const useUIStore = create<UIState>()(
  persist(
    (set, get) => ({
      isSidebarCollapsed: false,
      isNavigationSubMenuExpanded: false,
      
      setSidebarCollapsed: (collapsed: boolean) => set({ isSidebarCollapsed: collapsed }),
      toggleSidebar: () => set({ isSidebarCollapsed: !get().isSidebarCollapsed }),
      setNavigationSubMenuExpanded: (expanded: boolean) => set({ isNavigationSubMenuExpanded: expanded }),
      toggleNavigationSubMenu: () => set({ isNavigationSubMenuExpanded: !get().isNavigationSubMenuExpanded }),
    }),
    {
      name: 'ui-store',
    }
  )
)

export default useUIStore