/**
 * 系统设置相关钩子
 * 作者: 阿瑞
 * 功能: 提供系统设置状态管理的自定义钩子函数
 * 版本: 1.1.0
 */

import { useCallback, useEffect, useMemo } from 'react';
import { 
  useSettings, 
  useSettingActions, 
  useThemeMode,
  ThemeMode
} from '@/store/settingStore';

/**
 * 主题模式钩子
 * 提供主题模式及切换功能
 * @returns 主题模式相关状态和操作
 */
export function useTheme() {
  const themeMode = useThemeMode();
  const { setThemeMode, toggleThemeMode } = useSettingActions();
  
  // 检查是否为暗色模式
  const isDarkMode = useMemo(() => themeMode === ThemeMode.Dark, [themeMode]);
  
  // 切换为暗色模式
  const enableDarkMode = useCallback(() => {
    setThemeMode(ThemeMode.Dark);
  }, [setThemeMode]);
  
  // 切换为亮色模式
  const enableLightMode = useCallback(() => {
    setThemeMode(ThemeMode.Light);
  }, [setThemeMode]);
  
  return {
    themeMode,
    isDarkMode,
    toggleThemeMode,
    enableDarkMode,
    enableLightMode
  };
}

/**
 * 使用系统主题的钩子
 * 监听系统主题变化并自动应用
 */
export function useSystemTheme() {
  const { setThemeMode } = useSettingActions();
  
  useEffect(() => {
    // 只在客户端执行
    if (typeof window === 'undefined') return;
    
    // 监听系统主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    // 初始设置
    setThemeMode(mediaQuery.matches ? ThemeMode.Dark : ThemeMode.Light);
    
    // 监听系统主题变化
    const handleChange = (e: MediaQueryListEvent) => {
      setThemeMode(e.matches ? ThemeMode.Dark : ThemeMode.Light);
    };
    
    // 添加监听器
    mediaQuery.addEventListener('change', handleChange);
    
    // 清理监听器
    return () => mediaQuery.removeEventListener('change', handleChange);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 故意为空依赖数组，仅在组件挂载时运行一次
}

/**
 * 应用主题到DOM的钩子
 * 用于客户端组件中应用主题
 */
export function useApplyTheme() {
  const themeMode = useThemeMode();
  
  useEffect(() => {
    if (typeof document === 'undefined') return;
    
    // 移除所有主题相关类名，然后添加当前主题类名
    document.body.classList.remove('dark-theme', 'light-theme');
    document.body.classList.add(themeMode === ThemeMode.Dark ? 'dark-theme' : 'light-theme');
    
    // 为移动设备设置meta主题色
    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
    if (metaThemeColor) {
      metaThemeColor.setAttribute(
        'content',
        themeMode === ThemeMode.Dark ? '#0a1128' : '#f6f9fc'
      );
    }
  }, [themeMode]);
}

/**
 * 导出基础钩子以便重用
 */
export {
  useSettings,
  useSettingActions,
  useThemeMode
};

// 创建命名导出对象以符合规范
const settingsHooks = {
  useTheme,
  useApplyTheme,
  useSystemTheme
};

export default settingsHooks; 