import React, { useContext } from 'react';
import { ConfigProvider, Tabs, Divider, Menu, Dropdown } from 'antd';
import Icon, { DownOutlined } from '@ant-design/icons';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { ReactSVG } from 'react-svg';
import { useHistory } from '@wisdom-utils/runtime';
import './index.less';
const { TabPane } = Tabs;

const Index = props => {
  const history = useHistory();
  const context = useContext(ConfigProvider.ConfigContext);
  const prefixCls = props.prefixCls ?? context.getPrefixCls();
  const { childrenRoutes = [] } = props;
  const [selectedKey, setSelectedKey] = useMergedState(() => [], {
    value: props.selectedKey,
    onChange: props.onHandlerSubmenu,
  });
  const [tabActiveKey, setTabActiveKey] = useMergedState(() => '', {
    value: props.tabActiveKey,
    onChange: props.onTabChange,
  });

  React.useEffect(() => {
    const current = selectedKey[0];
    if (current) {
      if (window.__POWERED_BY_QIANKUN__) {
        window.history.pushState(null, '', `/civbase${current}`);
      } else {
        history.push(`/${current}`);
      }
    }
  }, [selectedKey]);

  const onHandleSubmenu = ({ item, key, keyPath, domEvent }) => {
    setSelectedKey([key]);
    // window.history.pushState(null, '', `/civbase${key}`);
  };
  const renderChildrenMenu = route => {
    const routes = (route.routes || []).map(item => {
      item.key = item.href;
      return item;
    });
    const menu = (
      <Menu selectedKeys={selectedKey} onClick={onHandleSubmenu}>
        {(routes || []).map((item, index) => {
          return (
            <>
              <Menu.Item key={item.href}>
                <div>
                  <span />
                  <span>{item.name}</span>
                </div>
              </Menu.Item>
              <Divider style={{ width: '80%', minWidth: '80%', margin: '0 auto' }} />
            </>
          );
        })}
      </Menu>
    );
    return (
      <>
        <Dropdown overlay={menu} overlayClassName={`${prefixCls}-dropdown-custom-menu`}>
          <div>
            {route.extData.icon == '1' ? (
              <span />
            ) : /.svg/.test(route.extData.icon) ? (
              <ReactSVG
                src={route.extData.icon}
                style={{ width: '18px', height: '18px', position: 'relative', top: '-3px' }}
              />
            ) : (
              <img src={route.extData.icon} style={{ width: '18px', height: '18px' }} />
            )}
            <span style={{ marginLeft: '8px' }}>{route.name} </span>
            <DownOutlined style={{ position: 'relative', right: '-10px' }} />
          </div>
        </Dropdown>
        <Divider type="vertical" />
      </>
    );
  };

  const onTab = event => {
    setTabActiveKey(event);
    if (event.indexOf('web_console') === -1) {
      if (window.__POWERED_BY_QIANKUN__) {
        window.history.pushState(null, '', `/civbase${event}`);
      } else {
        history.push(event);
      }
    }
  };

  return (
    <div className={`${prefixCls}-menu-item-children`}>
      <Tabs activeKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={event => onTab(event)}>
        {childrenRoutes.map((item, index) => (
          <>
            <TabPane
              className="only-last-children"
              tab={
                <>
                  {item.routes ? (
                    renderChildrenMenu(item)
                  ) : (
                    <>
                      {item.icon ? (
                        item.icon
                      ) : item.extData && item.extData.icon === '1' ? (
                        <span />
                      ) : /.svg/.test(item.extData.icon) ? (
                        <ReactSVG src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
                      ) : (
                        item.extData && <img src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
                      )}
                      <span className={`menu-item-name`}>{item.name}</span>
                      {childrenRoutes.length === 1 ? null : <Divider type="vertical" />}
                    </>
                  )}
                </>
              }
              key={item.path}
            />
          </>
        ))}
      </Tabs>
    </div>
  );
};

export default Index;
