import { useEffect, useState } from 'react';
import { useResponsive } from 'ahooks';
import type * as E from '@handpear/enums';

/** 获取当前响应式断点名称 */
export function useResponding() {
  const [responding, setResponding] = useState<keyof typeof E.COL_SEARCH>('xs');
  const responsive = useResponsive() as Record<keyof typeof E.COL_SEARCH, boolean>;

  useEffect(() => {
    switch (true) {
      case responsive.xxl:
        setResponding('xxl');
        break;
      case responsive.xl:
        setResponding('xl');
        break;
      case responsive.lg:
        setResponding('lg');
        break;
      case responsive.md:
        setResponding('md');
        break;
      case responsive.sm:
        setResponding('sm');
        break;
      case responsive.xs:
        setResponding('xs');
        break;

      default:
        break;
    }

    return () => {
      setResponding('xs');
    };
  }, [responding, responsive]);

  return { responding };
}