import React, { useContext, useState, useEffect } from 'react';
import { Breadcrumb } from 'antd';
import classNames from 'classnames';
import useConfig from './../../use/useConfig';
import Context from './../Context';
import Icon from './../Icon/Icon';
import style from './pageHeader.module.scss';

const Item = Breadcrumb.Item;
const pathMap = {}; // 存储原始path与实际path的关系

type BreadcrumbData = {
  name: string;
  path: string
}

interface IProps {
  title?: string;
  extra?: React.ReactNode;
  route?: boolean
}

const PageHeader = ({ title, extra, route }: IProps) => {
  const { routes, history } = useConfig();
  const { collapsed, changeCollapsed } = useContext(Context);
  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbData[]>([]);

  useEffect(() => {
    if (!routes || !history) return;

    let curr = routes.find(item => item.path === history.location.pathname),
      arr = [];
    
    while (curr) {
      arr.push(curr);
      curr = routes.find(item => item.path === curr?.parentPath);
    }

    setBreadcrumbs(arr.map(item => ({
      path: item.path!,
      name: window.t?.(item.path) || ''
    })))
  }, [history, route]);
  
  useEffect(() => {
    if(!history) return;

    const unlisten = history.listen(location => {
      pathMap[location.pathname] = location.pathname + location.search;
    })

    return () => unlisten();
  }, [history]);

  return (
    <div className={classNames(style.box, {
      [style.route]: route
    })}>
      <div className={style.content}>
        {collapsed && route && (
          <Icon
            icon='iconzhankaidaohang'
            className={style.collapsed}
            onClick={changeCollapsed} />
        )}
        {breadcrumbs.length ? (
          <Breadcrumb>
            {breadcrumbs.map((item, index) => (
              <Item key={item.path}>
                {index === breadcrumbs.length - 1 ? item.name : (
                  <a href={item.path}>{item.name}</a>
                )}
              </Item>
            ))}
          </Breadcrumb>
        ) : title ? title : window.t?.(title || '')}
      </div>
      <div className={style.extra}>
        {extra}
      </div>
    </div>
  )
}

export default PageHeader;