import React, { useEffect, useState } from 'react';
import styles from './index.less';

import { useModel, history, useLocation } from 'umi';
import useMenuList, { menutype } from '@/hooks/useMenuList';
import cx from 'classnames';

type PageHeaderProps = {
  title: React.ReactNode;
  action: React.ReactNode;
};
const PageHeader: React.FC<PageHeaderProps> = ({ title, action }) => {
  //console.log('PageHeader');

  const { menuList } = useMenuList();
  const [pathId, setPathId] = useState<string>('');
  const location = useLocation();

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      //debugger;
    });
    //debugger;
    var pathName = location.pathname;
    pathName = pathName.replace(/\//g, '');
    pathName = pathName.toLowerCase();
    //console.log('location,action', pathName, location.pathname);
    setPathId(pathName);
    return () => {
      //debugger;
      unlisten();
    };
  }, [location]);

  const menuClick = (item: menutype) => {
    if (item.id == pathId) return;
    history.push(`/${item.id}`);
  };

  return (
    <>
      <div className={styles.navHeader}>
        <div className={styles.menuDiv}>
          <div className={cx(styles.ntitle, styles.selTitle)}>{title}</div>
        </div>
        {action}
      </div>
    </>
  );
};

export default PageHeader;
