import React, { useState, useEffect, useCallback } from 'react';
// import { Link, withRouter } from 'react-router-dom';
import { ajax } from '@/utils';
import { Nav } from '@alifd/next';
import FoundationSymbol from '@icedesign/foundation-symbol';
import { headerMenuConfig } from '@/config/menu';
import styles from './index.module.scss';

function Header(props) {
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [loginInfoData, setLoginInfo] = useState('');
  // const { pathname } = location;
  const pathname = '/fff';
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const loginInfo = await ajax({
        api: 'getLoginInfo',
        method: 'get'
      });
      await setLoading(false);
      if (loginInfo.success) {
        setLoginInfo(loginInfo.result.name);
      }
    } catch (e) {}
  });
  const logout = useCallback(async () => {
    try {
      const responseData = await ajax({
        api: 'logout',
        method: 'post'
      });

      if (responseData.success) {
        location.href = '/portal/';
        // await setData(responseData.result);
      } else {
        // fail
      }
    } catch (e) {}
  });
  return (
    <div className={styles.headerContainer}>
      <div className={styles.headerNavbar}>
        <Nav
          className={styles.headerNavbarMenu}
          selectedKeys={[pathname]}
          defaultSelectedKeys={[pathname]}
          direction="hoz"
          type="secondary"
        >
          {headerMenuConfig &&
            headerMenuConfig.length > 0 &&
            headerMenuConfig.map((nav, index) => {
              if (nav.children && nav.children.length > 0) {
                return (
                  <Nav.SubNav
                    triggerType="click"
                    key={index}
                    title={
                      <span>
                        {nav.icon ? (
                          <FoundationSymbol size="small" type={nav.icon} />
                        ) : null}
                        <span>{nav.name}</span>
                      </span>
                    }
                  >
                    {nav.children.map(item => {
                      const linkProps = {};
                      // if (item.external) {
                      if (item.newWindow) {
                        linkProps.target = '_blank';
                      }

                      linkProps.href = item.path;
                      return (
                        <Nav.Item key={item.path}>
                          <a {...linkProps}>
                            <span>{item.name}</span>
                          </a>
                        </Nav.Item>
                      );
                      // }
                    })}
                  </Nav.SubNav>
                );
              }
              const linkProps = {};

              if (nav.newWindow) {
                linkProps.target = '_blank';
              }
              linkProps.href = nav.path;
              return (
                <Nav.Item key={nav.path}>
                  <a {...linkProps}>
                    <span>
                      {nav.icon ? (
                        <FoundationSymbol size="small" type={nav.icon} />
                      ) : null}
                      {nav.name}
                    </span>
                  </a>
                </Nav.Item>
              );
            })}
          {loginInfoData && (
            <Nav.Item>
              <span>欢迎您, {loginInfoData}</span>
            </Nav.Item>
          )}
          <Nav.Item key="logout">
            <a onClick={logout}>
              <span>登出</span>
            </a>
          </Nav.Item>
        </Nav>
      </div>
    </div>
  );
}

export default Header;