import React from 'react';
import { connect } from 'umi';
import { LogoutOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin } from 'antd';
import { IconFontConfig } from '@/common';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import ModalUpdatePassword from '../ModalUpdatePassword';

class AvatarDropdown extends React.Component {
  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;
      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }
      return;
    } else if (key === 'password') {
      const { dispatch } = this.props;
      dispatch({
        type: 'user/changeState',
        payload: {
          dataModal: {
            modalType: 'PASSWORD_UPDATE_MODAL',
            modalShow: true,
            modalData: {},
          },
        },
      });
    }
  };

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        <Menu.Item key="password">
          <InfoCircleOutlined />
          修改密码
        </Menu.Item>
        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <>
        <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`}>
            <IconFontConfig type="icon-header" style={{ fontSize: '28px' }} className="mr-10" />
            <span className={styles.name}>{currentUser.name}</span>
          </span>
        </HeaderDropdown>
        <ModalUpdatePassword />
      </>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
          lineHeight: '64px',
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);