import React, { useContext, useState, useEffect, useCallback } from 'react';
import { ConfigProvider, Divider, Skeleton, Tooltip } from 'antd';
import classNames from 'classnames';
import { ReactSVG } from 'react-svg';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
const LoadingSkeleton = props => {
  const { route } = props;
  return (
    <div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
      <Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
        {props.children}
      </Skeleton>
    </div>
  );
};
const Menu = props => {
  const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
  const { route } = props;
  const history = useHistory();
  const [activeMenu, setActiveMenu] = useState("首页");
  const [sunRoute, setsunRoute] = useState(route);
  const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
    value: props.active,
    onChange: props.onActiveChange,
  });
  const toLink = path => {
    if (!window.__POWERED_BY_QIANKUN__) {
      history.push(path);
    } else {
      window.history.pushState(null, '', path);
    }
  };
  const onSelectItem = (item, index) => {
    let current = void 0;
    let childrenRoutes = [];
    setActiveMenu(item.name);
    if (item && item.child) {
      current = item.child[0];
      childrenRoutes = item.child;
    } else {
      current = item;
      childrenRoutes = [item];
    }

    setSelectIndex(index);
    if (/iframe/.test(current.path)) {
      history.push({
        path: 'iframe',
        state: current.params,
      });
    } else {
      window.__POWERED_BY_QIANKUN__ ? toLink(`/civbase${current.path}`) : toLink(current.path);
    }
    onMenuClick && onMenuClick(current, childrenRoutes, index);
  };
  useEffect(() => {
    let all=props.flatMenu;
    all.forEach((it)=>{
      if(it.path===props.location.pathname){
        setActiveMenu(it.name)
        return;
      }
    })
    
  }, [props.location.pathname]);
  useEffect(() => {
    if (route && route.routes) {
      setsunRoute(route);
      let tmp = treeRoutes(route.routes);
      setsunRoute({ ...sunRoute, routes: tmp });
    }
  }, [route]);
  const treeRoutes = useCallback(iroute =>
    iroute
      .filter(item => item.level < 4)
      .map(item => {
        if (item.routes && Array.isArray(item.routes) && item.routes.length >= 1) {
          if (item.level === 3) {
            item.child = item.routes;
          }
          item.routes = treeRoutes(item.routes);
        }
        return item;
      }),
  );
  return (
    <LoadingSkeleton {...props}>
      {route && route.routes && route.routes.length > 0 && (
        <React.Fragment>
          {/* {menuHeaderRender ? (
            menuHeaderRender(props)
          ) : (
            <>
              <ul className={classNames(`${prefixCls}-menu`)} style={{ minHeight: '0px', marginBottom: '0px' }}>
                <li className={`${prefixCls}-menu-item`} onClick={onMenuHeaderClick}>
                  <Tooltip placement="right" title={collapsed ? route.name : ''}>
                    <a>
                      {route && route.extData && route.extData.icon && <img src={route.extData.icon} />}
                      {collapsed ? null : (
                        <span className={classNames(`${prefixCls}-menu-item-text`, `${prefixCls}-menu-item-current`)}>
                          {route && route.name}
                        </span>
                      )}
                    </a>
                  </Tooltip>
                </li>
              </ul>
              <div className={`${prefixCls}-line`} />
            </>
          )} */}
          <ul className={classNames(`${prefixCls}-menu ${prefixCls}-menu-vertical`)}>
            <ProLayout
              route={sunRoute}
              title={props.title}
              logo={null}
              siderWidth={140}
              config={props.global}
              defaultCollapsed={false}
              collapsed={false}
              breakpoint={'xs'}
              // onHeaderLogo={handlerIndustry}
              // onPageChange={handlerPageChange}
              // onMenuPanelItemClick={handleUpdateCurrentIndex}
              menuItemRender={(item, dom) =>
                item.level < 4 ? (
                  <div
                    onClick={() => {
                      onSelectItem(item, dom);
                    }}
                    className={classNames(`test-icon`, {
                      [`hight-active`]: item.name === activeMenu,
                    })}
                  >
                    {item.extData.icon == '1' ? (
                      <span />
                    ) : /.svg/.test(item.extData.icon) ? (
                      <div className="my-svg">
                        <ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                      </div>
                    ) : (
                      <div className="my-img">
                        <img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                      </div>
                    )}
                    <span className="my-desc" title={item.name}>
                      {' '}
                      {item.name}{' '}
                    </span>
                  </div>
                ) : null
              }
              subMenuItemRender={(item, dom) => (
                <div className={classNames(`test-icon`)}>
                  {item.extData.icon == '1' ? (
                    <span />
                  ) : /.svg/.test(item.extData.icon) ? (
                    <div className="my-svg">
                      <ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                    </div>
                  ) : (
                    <div className="my-img">
                      <img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                    </div>
                  )}
                  <span className="my-desc" title={item.name}>
                    {' '}
                    {item.name}{' '}
                  </span>
                </div>
              )}
            />
          </ul>
        </React.Fragment>
      )}
    </LoadingSkeleton>
  );
};
export default props => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('layout-slider');
  const { menuItemRender, menuHeaderRender, siderWidth } = props;
  const { collapsed, onCollapse, route, style } = props;
  return (
    <>
      <aside
        // className={classNames(`${prefixCls}`, `${prefixCls}-fixed`, {
        //   [`${prefixCls}-collapsed`]: collapsed,
        // })}
        style={{paddingTop:'50px'}}
      >
        <div className={`${prefixCls}-children`}>
          <div className={`${prefixCls}-wrapper`} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
            {/* {LoadingSkeleton(props)} */}
            {menuItemRender ? menuItemRender(props) : Menu(Object.assign({}, props, { prefixCls }))}
          </div>
          {route && route.routes && route.routes.length > 0 && (
            <div className={`${prefixCls}-pro-sider-links`}>
              <ul
                className={`${prefixCls}-menu ${prefixCls}-menu-root ${prefixCls}-menu-inline ${prefixCls}-menu-dark ${prefixCls}-pro-sider-link-menu`}
                role="menu"
                tabIndex="0"
              >
                <li
                  className={`${prefixCls}-menu-item ${prefixCls}-menu-item-only-child ${prefixCls}-pro-sider-collapsed-button`}
                  style={{ height: '40px', lineHeight: '40px' }}
                  role="menuitem"
                  tabIndex="-1"
                  onClick={onCollapse}
                >
                  <span className={`${prefixCls}-menu-title-content`}>
                    <span
                      role="img"
                      aria-label="menu-fold"
                      className="anticon anticon-menu-fold"
                      style={{ color: '#fff' }}
                    >
                      <svg
                        viewBox="64 64 896 896"
                        focusable="false"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z" />
                      </svg>
                    </span>
                  </span>
                </li>
              </ul>
              <div aria-hidden="true" style={{ display: 'none' }} />
            </div>
          )}
        </div>
      </aside>
    </>
  );
};
