import React, { useState, useEffect } from 'react';
import { Space, Breadcrumb, Button, Row, Col, Menu } from 'antd';
import { useLocation, useNavigate, Link } from 'react-router-dom';

import { getRouteList, getRouteItem } from '@/utils/breadCrumb';
import { useSelector } from 'react-redux';
import { LeftOutlined } from '@ant-design/icons';
import IconFont from '@/common/iconfont';
import UserMenu from './menu';

const BreadCrumbMenu = () => {
  const { pathname } = useLocation();
  const location = useLocation();
  const navigate = useNavigate();
  const [breadcrumbList, setBreadcrumbList] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);

  const { menuRouter } = useSelector((state) => state.user);
  const [isShowMenu, setisShowMenu] = useState(true);
  const [isShowBack, setIsShowBack] = useState(false);
  const arr = ['/teacher', '/userinfo'];

  const transLinkMenu = (route, bool) => {
    return bool ? <span>{route.title}</span> : <Link to={route.path}>{route.title}</Link>;
  };

  useEffect(() => {
    const pathnameArr = location.pathname.split('/');
    if (pathnameArr.length > 0) {
      const firstKey = pathnameArr[1];
      const secondKey = pathnameArr[2];
      setSelectedKeys([`/${firstKey}/${secondKey}`]);
      if (secondKey) {
        const breadMenu = menuRouter.filter((item) => item.path === `/${firstKey}`);
        if (breadMenu && breadMenu.length && breadMenu[0].children.length) {
          const menuTemp = [];
          breadMenu[0].children.forEach((cItem, cindex) => {
            menuTemp.push({
              label: transLinkMenu(cItem),
              key: cItem.path,
              icon: cItem.icon ? <IconFont type={cItem.icon} /> : '',
            });
          });
          setBreadcrumbList(menuTemp);
        }
      }
    }
  }, [location.pathname]);

  // useEffect(() => {
  //   const routeList = getRouteList(
  //     [],
  //     getRouteItem(baseRootRouter, pathname) ? [getRouteItem(baseRootRouter, pathname)] : [],
  //     pathname,
  //   );

  //   if (routeList.length === 0) {
  //     setBreadcrumbList([
  //       { path: '/', name: '首页', key: '/', isSubMenu: false },
  //       { path: '404', name: 'Not Found', key: '/404', isSubMenu: false },
  //     ]);
  //   } else {
  //     setBreadcrumbList([...routeList]);
  //   }
  // }, [pathname]);

  // const linkTo = (path) => {
  //   navigate(path);
  // };
  // const treeDataToArray = (source) => {
  //   const res = [];

  //   // 第二种方式
  //   source.forEach((item) => {
  //     res.push(item);
  //     item.children && res.push(...treeDataToArray(item.children));
  //   });
  //   return res;
  // };
  useEffect(() => {
    // const flatRoutes = treeDataToArray(rootRouter);
    // const routeMeta = flatRoutes.find((item) => item.path === pathname);
    // if (routeMeta.back == true) {
    //   setIsShowBack(true);
    // } else {
    //   setIsShowBack(false);
    // }
    // if (arr.includes(location.pathname)) {
    //   return setisShowMenu(false);
    // }
    // setisShowMenu(true);
  }, [pathname]);

  useEffect(() => {
    if (
      window.location.pathname === '/books/management/add-edit' ||
      window.location.pathname === '/setting/help/addedit' ||
      window.location.pathname === '/books/management/chapter' ||
      window.location.pathname === '/userinfo' ||
      window.location.pathname === '/books/audit/detail' ||
      window.location.pathname === '/books/sale/discussP' ||
      window.location.pathname === '/books/sale/discuss-detail' ||
      window.location.pathname === '/member/list/detail' ||
      window.location.pathname === '/books/sale/detail'
    ) {
      setIsShowBack(true);
    } else {
      setIsShowBack(false);
    }
  }, [location.pathname]); // 将条件判断移到依赖数组中

  return (
    <div className='crumb-bread-list'>
      <div className='crumb-bread-menu'>
        <Row style={{ alignItems: 'center' }}>
          <Col span={isShowBack} className='breadmenu-container-box'>
            <div className='backTo'>
              {isShowBack ? (
                <Col>
                  <Button type='text' icon={<LeftOutlined />} onClick={() => navigate(-1)}>
                    返回
                  </Button>
                </Col>
              ) : null}
            </div>

            {isShowMenu && (
              <Menu items={breadcrumbList} mode='horizontal' selectedKeys={selectedKeys} />
            )}
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default BreadCrumbMenu;
