/**
 * 断点检测 Hook
 */

import { useMemo } from 'react';
import { useWindowDimensions } from './useWindowDimensions';
import {
  BreakpointKey,
  FineBreakpointKey,
  getBreakpoint,
  getFineBreakpoint,
} from './constants';

export interface BreakpointInfo {
  // 基础断点
  breakpoint: BreakpointKey;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isWide: boolean;
  isWideScreen: boolean;
  
  // 细粒度断点
  fineBreakpoint: FineBreakpointKey;
  isXS: boolean;
  isSM: boolean;
  isMD: boolean;
  isLG: boolean;
  isXL: boolean;
  is2XL: boolean;
  is3XL: boolean;
  is4XL: boolean;
}

/**
 * 断点检测 Hook
 * 返回当前断点信息和布尔标志
 */
export function useBreakpoint(): BreakpointInfo {
  const { width } = useWindowDimensions();

  const breakpoint = useMemo(() => getBreakpoint(width), [width]);
  const fineBreakpoint = useMemo(() => getFineBreakpoint(width), [width]);

  return useMemo(() => ({
    breakpoint,
    isMobile: breakpoint === 'mobile',
    isTablet: breakpoint === 'tablet',
    isDesktop: breakpoint === 'desktop',
    isWide: breakpoint === 'wide',
    isWideScreen: breakpoint === 'tablet' || breakpoint === 'desktop' || breakpoint === 'wide',
    fineBreakpoint,
    isXS: fineBreakpoint === 'xs',
    isSM: fineBreakpoint === 'sm',
    isMD: fineBreakpoint === 'md',
    isLG: fineBreakpoint === 'lg',
    isXL: fineBreakpoint === 'xl',
    is2XL: fineBreakpoint === '2xl',
    is3XL: fineBreakpoint === '3xl',
    is4XL: fineBreakpoint === '4xl',
  }), [breakpoint, fineBreakpoint]);
}
