text: import logo200Image from 'assets/img/logo/logo_200.png';
  import sidebarBgImage from 'assets/img/sidebar/sidebar-4.jpg';
  import SourceLink from 'components/SourceLink';
  import React from 'react';
  import { FaGithub } from 'react-icons/fa';
  import {
    MdAccountCircle,
    MdDashboard,
    MdExtension,
    MdKeyboardArrowDown,
    MdRadioButtonChecked,
    MdWeb
  } from 'react-icons/md';
  import { NavLink } from 'react-router-dom';
  import {
    // UncontrolledTooltip,
    Collapse,
    Nav,
    Navbar,
    NavItem,
    NavLink as BSNavLink,
  } from 'reactstrap';
  import bn from 'utils/bemnames';
  
  const sidebarBackground = {
    backgroundImage: `url("${sidebarBgImage}")`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  };
  
  const navComponents = [
    { to: '/test2A', name: 'Test2A', exact: false, Icon: MdRadioButtonChecked }
  ];
  
  const pageContents = [
    { to: '/login', name: 'login / signup', exact: false, Icon: MdAccountCircle }
  ];
  
  const navItems = [
    { to: '/', name: '首页', exact: true, Icon: MdDashboard },
    { to: '/test1', name: 'test1', exact: false, Icon: MdWeb }
  ];
  
  const bem = bn.create('sidebar');
  
  class Sidebar extends React.Component {
    state = {
      isOpenTest2: true,
      isOpenContents: true,
      isOpenPages: true,
    };
  
    handleClick = name => () => {
      this.setState(prevState => {
        const isOpen = prevState[`isOpen${name}`];
  
        return {
          [`isOpen${name}`]: !isOpen,
        };
      });
    };
  
    render() {
      return (
        <aside className={bem.b()} data-image={sidebarBgImage}>
          <div className={bem.e('background')} style={sidebarBackground} />
          <div className={bem.e('content')}>
            {/* logo */}
            <Navbar>
              <SourceLink className="navbar-brand d-flex">
                <img
                  src={logo200Image}
                  width="40"
                  height="30"
                  className="pr-2"
                  alt=""
                />
                <span className="text-white">
                  Reduction <FaGithub />
                </span>
              </SourceLink>
            </Navbar>
            {/* 一级菜单 */}
            <Nav vertical>
              {navItems.map(({ to, name, exact, Icon }, index) => (
                <NavItem key={index} className={bem.e('nav-item')}>
                  <BSNavLink
                    id={`navItem-${name}-${index}`}
                    className="text-uppercase"
                    tag={NavLink}
                    to={to}
                    activeClassName="active"
                    exact={exact}
                  >
                    <Icon className={bem.e('nav-item-icon')} />
                    <span className="">{name}</span>
                  </BSNavLink>
                </NavItem>
              ))}
              {/* 多级菜单 */}
              <NavItem
                className={bem.e('nav-item')}
                onClick={this.handleClick('Test2')}
              >
                <BSNavLink className={bem.e('nav-item-collapse')}>
                  <div className="d-flex">
                    <MdExtension className={bem.e('nav-item-icon')} />
                    <span className=" align-self-start">Test2</span>
                  </div>
                  <MdKeyboardArrowDown
                    className={bem.e('nav-item-icon')}
                    style={{
                      padding: 0,
                      transform: this.state.isOpenTest2
                        ? 'rotate(0deg)'
                        : 'rotate(-90deg)',
                      transitionDuration: '0.3s',
                      transitionProperty: 'transform',
                    }}
                  />
                </BSNavLink>
              </NavItem>
              <Collapse isOpen={this.state.isOpenTest2}>
                {navComponents.map(({ to, name, exact, Icon }, index) => (
                  <NavItem key={index} className={bem.e('nav-item')}>
                    <BSNavLink
                      id={`navItem-${name}-${index}`}
                      className="text-uppercase"
                      tag={NavLink}
                      to={to}
                      activeClassName="active"
                      exact={exact}
                    >
                      <Icon className={bem.e('nav-item-icon')} />
                      <span className="">{name}</span>
                    </BSNavLink>
                  </NavItem>
                ))}
              </Collapse>
              <Collapse isOpen={this.state.isOpenPages}>
                {pageContents.map(({ to, name, exact, Icon }, index) => (
                  <NavItem key={index} className={bem.e('nav-item')}>
                    <BSNavLink
                      id={`navItem-${name}-${index}`}
                      className="text-uppercase"
                      tag={NavLink}
                      to={to}
                      activeClassName="active"
                      exact={exact}
                    >
                      <Icon className={bem.e('nav-item-icon')} />
                      <span className="">{name}</span>
                    </BSNavLink>
                  </NavItem>
                ))}
              </Collapse>
            </Nav>
          </div>
        </aside>
      );
    }
  }
  
  export default Sidebar;
  