import { useState, useEffect } from 'react';
import { useHistory, useLocation } from 'umi';

interface UseTabsHistoryParams {
  baseUrl: string;
}

export default function useTabsHistory({ baseUrl }: UseTabsHistoryParams) {
  const history = useHistory();
  const { pathname } = useLocation();
  const [activeTabKey, setActiveTabKey] = useState<string>('');

  useEffect(() => {
    const paths = pathname.split('/')?.filter(item => item && item !== baseUrl);

    setActiveTabKey(paths?.join('/'));
  }, [pathname]);

  const changeActiveKey = () => {
    const key = location.pathname
      ?.split('?')?.[0]
      ?.split('/')
      ?.reverse()?.[0];
    setActiveTabKey(key);
  };

  // 路由真正跳转才切换
  useEffect(() => {
    history?.listen(changeActiveKey);

    return () => {
      history?.listen(() => {});
    };
  }, []);

  const handleTabChange = (key: string) => {
    history.push(`/${baseUrl}/${key}`);
  };

  return {
    activeTabKey,
    handleTabChange,
  };
}