import { useState, useEffect, useMemo } from 'react';

interface WindowSize {
  width: number;
  height: number;
  isMobile: boolean;
}

/**
 * 自定义Hook，用于获取并监听窗口大小变化
 * @returns 当前窗口的宽度和高度以及是否为移动设备
 */
export function useWindowSize(): WindowSize {
  // 初始化状态为 undefined，避免服务器端渲染问题
  const [windowSize, setWindowSize] = useState<Omit<WindowSize, 'isMobile'>>({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

  // 判断是否为移动设备，默认小于768px为移动设备
  const isMobile = useMemo(() => windowSize.width < 768, [windowSize.width]);

  useEffect(() => {
    // 只在客户端执行
    if (typeof window === 'undefined') {
      return;
    }

    // 处理窗口大小变化的函数
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // 添加事件监听器
    window.addEventListener('resize', handleResize);

    // 确保初始状态正确
    handleResize();

    // 清理函数
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组意味着这个effect只在组件挂载和卸载时运行

  return { ...windowSize, isMobile };
}

export default useWindowSize;