import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { ThemeConfig } from '@/types'

export const useAppStore = defineStore('app', () => {
  // 侧边栏状态
  const sidebarCollapsed = ref<boolean>(false)
  
  // 主题配置
  const themeConfig = ref<ThemeConfig>({
    primaryColor: '#409eff',
    sidebarWidth: 210,
    sidebarCollapsed: false,
    headerHeight: 50,
    breadcrumbHeight: 40
  })
  
  // 页面加载状态
  const pageLoading = ref<boolean>(false)
  
  // 设备类型
  const device = ref<'desktop' | 'tablet' | 'mobile'>('desktop')
  
  // 切换侧边栏折叠状态
  const toggleSidebar = (): void => {
    sidebarCollapsed.value = !sidebarCollapsed.value
    themeConfig.value.sidebarCollapsed = sidebarCollapsed.value
  }
  
  // 设置侧边栏折叠状态
  const setSidebarCollapsed = (collapsed: boolean): void => {
    sidebarCollapsed.value = collapsed
    themeConfig.value.sidebarCollapsed = collapsed
  }
  
  // 设置页面加载状态
  const setPageLoading = (loading: boolean): void => {
    pageLoading.value = loading
  }
  
  // 设置设备类型
  const setDevice = (deviceType: 'desktop' | 'tablet' | 'mobile'): void => {
    device.value = deviceType
  }
  
  // 更新主题配置
  const updateThemeConfig = (config: Partial<ThemeConfig>): void => {
    themeConfig.value = { ...themeConfig.value, ...config }
  }
  
  // 重置状态
  const resetState = (): void => {
    sidebarCollapsed.value = false
    pageLoading.value = false
    device.value = 'desktop'
    themeConfig.value = {
      primaryColor: '#409eff',
      sidebarWidth: 210,
      sidebarCollapsed: false,
      headerHeight: 50,
      breadcrumbHeight: 40
    }
  }
  
  return {
    // 状态
    sidebarCollapsed,
    themeConfig,
    pageLoading,
    device,
    
    // 方法
    toggleSidebar,
    setSidebarCollapsed,
    setPageLoading,
    setDevice,
    updateThemeConfig,
    resetState
  }
})