import React from 'react';

import {
  Avatar,
  Menu,
  Spin,
} from 'antd';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import {
  LogoutOutlined,
  SettingOutlined,
  UserOutlined,
} from '@ant-design/icons';

import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */
  onMenuClick = (event) => {
    
    const { key } = event;
    if (key === 'logout') {
      createStoreage.remove("PANDA_STORE")
      this.props.history.push(`/user/login/?client=${window.globalConfig.client}`);
      location.reload();
      return;
    }
    
  };

  render() {
    const props = this.props;
    const {
      currentUser = {
        avatar: props.global && props.global.userInfo && props.global.userInfo.UserImge ||  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
        name: props.global && props.global.userInfo && props.global.userInfo.fullName || 'Serati Ma',
      },
    } = this.props;
    const menuHeaderDropdown = (
      <Menu
        className={styles.menu}
        selectedKeys={[]}
        onClick={this.onMenuClick}
      >
        {
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        }
        {
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        }
        {<Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            className={styles.avatar}
            src={currentUser.avatar}
            alt="avatar"
          />
          <span className={`${styles.name} anticon`}>{currentUser.name}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    global: state.getIn(['global', 'globalConfig'])
  }
}
export default connect(mapStateToProps, null)(withRouter(AvatarDropdown));
