/**
 * 响应式值选择器 Hook
 */

import { useMemo } from 'react';
import { useBreakpoint } from './useBreakpoint';
import { ResponsiveValue, FineBreakpointKey, REVERSE_BREAKPOINT_ORDER } from './constants';

/**
 * 根据当前断点从响应式值对象中选择合适的值
 * 
 * @param value - 响应式值，可以是单一值或断点映射对象
 * @returns 选中的值
 * 
 * @example
 * const padding = useResponsiveValue({ xs: 8, md: 16, lg: 24 });
 * // 在 xs 屏幕返回 8，md 屏幕返回 16，lg 及以上返回 24
 */
export function useResponsiveValue<T>(value: ResponsiveValue<T>): T {
  const { fineBreakpoint } = useBreakpoint();
  
  return useMemo(() => {
    // 如果不是对象，直接返回
    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
      return value as T;
    }
    
    const valueMap = value as Partial<Record<FineBreakpointKey, T>>;
    
    // 从当前断点开始向下查找
    const currentIndex = REVERSE_BREAKPOINT_ORDER.indexOf(fineBreakpoint);
    for (let i = currentIndex; i < REVERSE_BREAKPOINT_ORDER.length; i++) {
      const bp = REVERSE_BREAKPOINT_ORDER[i];
      if (bp in valueMap) {
        return valueMap[bp]!;
      }
    }
    
    // 如果没找到，返回 xs 的值或第一个值
    return (valueMap.xs ?? Object.values(valueMap)[0]) as T;
  }, [value, fineBreakpoint]);
}