import React, { useCallback, memo } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon, Layout, Menu, Avatar } from 'antd';

const { Header } = Layout;
const { SubMenu } = Menu;

const HeaderStyled = styled(Header)`
  background: #fff !important;
  padding: 0 !important;
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  width: ${props => (props.collapsed === 'true' ? 'calc(100% - 80px)' : 'calc(100% - 256px)')};
  z-index: 29;
  transition: width 0.2s;
  box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.05);
  height: 72px !important;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  line-height: 72px !important;
`;

const LeftIcon = styled.div`
  width: 72px;
  height: 72px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-out;
  :hover {
    color: #1890ff;
    background-color: #f9f9fc;
  }
`;

const IconStyled = styled(Icon)`
  line-height: 72px;
  font-size: 18px;
`;

const MenuStyled = styled(Menu)`
  border-bottom: none !important;
  height: 72px;
  :hover {
    color: #1890ff;
    background-color: #f9f9fc;
    border-bottom: none !important;
  }
  .ant-menu-submenu {
    line-height: 72px !important;
    border-bottom: none !important;
  }
  .ant-menu-submenu-active {
    border-bottom: none !important;
  }
`;

const BasicHeader = memo(({ collapsed, onCollapseChange }) => {
  const handleCollapseChange = useCallback(() => {
    onCollapseChange(!collapsed);
  }, [collapsed]);

  return (
    <HeaderStyled collapsed={collapsed.toString()}>
      <LeftIcon onClick={handleCollapseChange}>
        <IconStyled type={collapsed ? 'menu-unfold' : 'menu-fold'} />
      </LeftIcon>
      <MenuStyled key='user' mode='horizontal'>
        <SubMenu
          title={
            <>
              <span style={{ color: '#999', marginRight: 4 }}>Hi,</span>
              <span>小肥牛</span>
              <Avatar style={{ marginLeft: 8 }} src={require('assets/img/default-avatar.png')} />
            </>
          }
        >
          <Menu.Item key='SignOut'>退出登录</Menu.Item>
        </SubMenu>
      </MenuStyled>
    </HeaderStyled>
  );
});

BasicHeader.propTypes = {
  collapsed: PropTypes.bool,
  onCollapseChange: PropTypes.func,
};

export default BasicHeader;