/**
 * 响应式媒体查询 Hooks
 * 用于检测屏幕尺寸和响应式断点
 */
import { useState, useEffect } from 'react';

/**
 * 通用媒体查询 Hook
 * @param query - CSS 媒体查询字符串
 * @returns 是否匹配查询条件
 */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    
    // 初始化状态
    setMatches(media.matches);

    // 监听变化
    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
    
    // 兼容旧版浏览器
    if (media.addEventListener) {
      media.addEventListener('change', listener);
    } else {
      // @ts-ignore - 兼容旧版 API
      media.addListener(listener);
    }

    return () => {
      if (media.removeEventListener) {
        media.removeEventListener('change', listener);
      } else {
        // @ts-ignore - 兼容旧版 API
        media.removeListener(listener);
      }
    };
  }, [query]);

  return matches;
}

/**
 * 检测是否为移动端（< 768px）
 */
export const useIsMobile = () => useMediaQuery('(max-width: 767px)');

/**
 * 检测是否为平板（768px ~ 1023px）
 */
export const useIsTablet = () => useMediaQuery('(min-width: 768px) and (max-width: 1023px)');

/**
 * 检测是否为桌面端（>= 1024px）
 */
export const useIsDesktop = () => useMediaQuery('(min-width: 1024px)');

/**
 * 检测是否为小屏幕（< 640px）
 */
export const useIsSmallScreen = () => useMediaQuery('(max-width: 639px)');

/**
 * 检测是否为大屏幕（>= 1280px）
 */
export const useIsLargeScreen = () => useMediaQuery('(min-width: 1280px)');

/**
 * 获取当前断点名称
 */
export const useBreakpoint = (): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' => {
  const is2xl = useMediaQuery('(min-width: 1536px)');
  const isXl = useMediaQuery('(min-width: 1280px)');
  const isLg = useMediaQuery('(min-width: 1024px)');
  const isMd = useMediaQuery('(min-width: 768px)');
  const isSm = useMediaQuery('(min-width: 640px)');

  if (is2xl) return '2xl';
  if (isXl) return 'xl';
  if (isLg) return 'lg';
  if (isMd) return 'md';
  if (isSm) return 'sm';
  return 'xs';
};


