import { useBreakpoints, useWindowSize } from '@vueuse/core';
import { computed } from 'vue';

// 断点定义
export const breakpoints = {
  xs: 0, // 手机竖屏 < 640px
  sm: 640, // 手机横屏 ≥ 640px
  md: 768, // 平板 ≥ 768px
  lg: 1024, // 小桌面 ≥ 1024px
  xl: 1280, // 桌面 ≥ 1280px
  xxl: 1536, // 大桌面 ≥ 1536px
};

export function useResponsive() {
  const bp = useBreakpoints(breakpoints);

  // 设备类型判断
  const isMobile = bp.smaller('md'); // < 768px
  const isTablet = bp.between('md', 'lg'); // 768px - 1024px
  const isDesktop = bp.greaterOrEqual('lg'); // ≥ 1024px

  // 精确断点
  const isXs = bp.smaller('sm'); // < 640px
  const isSm = bp.between('sm', 'md'); // 640px - 768px
  const isMd = bp.between('md', 'lg'); // 768px - 1024px
  const isLg = bp.between('lg', 'xl'); // 1024px - 1280px
  const isXl = bp.between('xl', 'xxl'); // 1280px - 1536px
  const isXxl = bp.greater('xxl'); // > 1536px

  // 监听窗口变化
  const { width, height } = useWindowSize();

  // 方向检测
  const isPortrait = computed(() => height.value > width.value);
  const isLandscape = computed(() => width.value > height.value);

  // 当前断点名称
  const currentBreakpoint = computed(() => {
    if (isXs.value) return 'xs';
    if (isSm.value) return 'sm';
    if (isMd.value) return 'md';
    if (isLg.value) return 'lg';
    if (isXl.value) return 'xl';
    return 'xxl';
  });

  return {
    // 设备类型
    isMobile,
    isTablet,
    isDesktop,

    // 精确断点
    isXs,
    isSm,
    isMd,
    isLg,
    isXl,
    isXxl,

    // 尺寸
    width,
    height,

    // 方向
    isPortrait,
    isLandscape,

    // 当前断点名称
    currentBreakpoint,
  };
}