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(() => {
    if (route && route.routes) {
      setsunRoute(route);
      let tmp = treeRoutes(route.routes);
      console.log('tmp', tmp);
      console.log('route', route);
      setsunRoute({ ...sunRoute, routes: tmp });
      console.log('sunRoute', sunRoute);
    }
  }, [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}
              // 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,
                    })}
                  >
                    {/.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`)}
                >
                  {/.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>
              )}
            />
            {/* {route &&
              (route.routes || [])
                .filter(item => !item.hideInMenu)
                .map((item, index) => (
                  <React.Fragment key={index}>
                    <li
                      key={index}
                      className={classNames(`${prefixCls}-menu-item`, {
                        [`${prefixCls}-menu-item-active`]: index === selectIndex,
                      })}
                      onClick={() => onSelectItem(item, index)}
                    >
                      <Tooltip placement="right" title={collapsed ? item.name : ''}>
                        <a>
                          {item.icon ? (
                            item.icon
                          ) : item.extData && /.svg/.test(item.extData.icon) ? (
                            <ReactSVG
                              src={item.extData.icon}
                              style={{ width: '20px', height: '20px' }}
                              className={`${prefixCls}-menu-item-icon`}
                            />
                          ) : (
                            item.extData && <img src={item.extData.icon} />
                          )}
                          {collapsed ? (
                            item.extData && (
                              <span className={`${prefixCls}-menu-item-text`}>
                                {(item.extData.shortName || item.name).substr(0, 2)}
                              </span>
                            )
                          ) : (
                            <span className={`${prefixCls}-menu-item-text`}>{item.name}</span>
                          )}
                        </a>
                      </Tooltip>
                    </li>
                    <Divider
                      style={{
                        border: '1px solid rgb(49, 53, 62, 0.3)',
                        margin: '0 auto',
                        minWidth: '80%',
                        width: '80%',
                      }}
                    />
                  </React.Fragment>
                ))} */}
          </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 (
    <>
      <div
        style={{
          width: collapsed ? '48px' : `${siderWidth}px`,
          overflow: 'hidden',
          flex: `0 0 ${collapsed ? 48 : siderWidth}px`,
          maxWidth: collapsed ? 48 : siderWidth,
          minWidth: collapsed ? 48 : siderWidth,
          transition:
            'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s',
          ...style,
        }}
      />
      <aside
        className={classNames(`${prefixCls}`, `${prefixCls}-fixed`, {
          [`${prefixCls}-collapsed`]: collapsed,
        })}
      >
        <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>
    </>
  );
};
