import React, { useContext, useState, useEffect } from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { Breadcrumb } from 'antd';
import check from '@/components/Authorized/CheckPermissions';
import { Link, useLocation } from 'react-router-dom';
import HeaderSearch from '../HeaderSearch';
import Colophon from '../Colophon';
import Avatar from './AvatarDropdown';
import styles from './index.less';

const routesOptions = route => {
  const buildOption = routeConfig => ({
    label: <Link to={routeConfig.path}>{routeConfig.name}</Link>,
    value: routeConfig.name,
  });
  return route.routes
    .map(r => {
      if (r.hideMenu) return null;
      if (r.authority) {
        if (r.routes) {
          return routesOptions(r);
        }
        return check(r.authority, buildOption(r), null);
      }
      if (r.routes) {
        return routesOptions(r);
      }
      return buildOption(r);
    })
    .flat()
    .filter(Boolean);
};

const GlobalHeaderRight = props => {
  const { theme, layout } = props;
  const [dosRouter, setDosRouter] = useState('');
  const { pathname } = useLocation();
  useEffect(() => {
    console.log(pathname, 'location');
    setDosRouter(pathname);
  }, [pathname]);
  let className = styles.right;
  const value = useContext(RouteContext);

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div className={className}>
      {/* <span className={styles.left}>{value.title}</span> */}
      <Breadcrumb {...value.breadcrumb} className={styles.lineHeight} />
      <div style={{ flex: 1 }} />
      <div style={{ margin: '0 10px' }}>
        <a
          target="_blank"
          href={`${window.location.origin}/civmanage/site/content${dosRouter}`}
          rel="noopener noreferer"
        >
          文档说明
        </a>
      </div>
      {/* <Colophon /> */}
      <div style={{ margin: '0 10px' }}>
        <a
          target="_blank"
          href={`${window.location.origin}/cityoms3/4.0.html`}
          rel="noopener noreferer"
        >
          运维平台4.0
        </a>
      </div>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search} ${styles.toRight}`}
        placeholder="站内搜索"
        defaultValue=""
        filterOption={(inputValue, option) =>
          option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
        }
        options={[...routesOptions(value.route)]}
      /> */}
      {/* <NoticeIcon className={`${styles.action} ${styles.toRight}`} /> */}
      <Avatar className={styles.toRight} />
      {/* <SelectLang className={styles.action} /> */}
    </div>
  );
};

export default GlobalHeaderRight;
