import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Button, Menu, Space, Spin } from 'antd';
import React from 'react';
import type { ConnectProps } from 'umi';
import { history, connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { CurrentUser } from '@/models/user';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
// import session from '@/utils/session';
import IconFont from '../IconFont';

export type GlobalHeaderRightProps = {
	currentUser?: CurrentUser;
	menu?: boolean;
} & Partial<ConnectProps>;

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
	onMenuClick = (event: {
		key: React.Key;
		keyPath: React.Key[];
		item: React.ReactInstance;
		domEvent: React.MouseEvent<HTMLElement>;
	}) => {
		const { key } = event;

		if (key === 'logout') {
			const { dispatch } = this.props;

			if (dispatch) {

				dispatch({
					type: 'login/logout',
				});
			}

			return;
		}
		if (key === 'center') {
			history.push(`/account/${key}`);
			return
		}
		history.push(`/account/${key}`);
	};
	componentDidMount() {
		const { dispatch , currentUser} = this.props;
		if(dispatch && !currentUser){
			dispatch({ type: 'user/fetch'})
		}
	}
	render(): React.ReactNode {
		const {
			currentUser,
			menu,
		} = this.props;
		
		const user: CurrentUser|undefined = currentUser // currentUser && currentUser.Name ? currentUser : session.get('currentUser')

		const menuHeaderDropdown = (
			<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
				{menu && (
					<Menu.Item key="center">
						<UserOutlined />
						个人中心
					</Menu.Item>
				)}
				{menu && (
					<Menu.Item key="settings">
						<SettingOutlined />
						个人设置
					</Menu.Item>
				)}
				{/* {menu && <Menu.Divider />} */}

				{/* <Menu.Item key="logout">
					<LogoutOutlined />
					退出登录
				</Menu.Item> */}
			</Menu>
		);
		return user && (user.Name||user.UserName) ? (
			<>
				<HeaderDropdown overlay={menuHeaderDropdown}>
					{/* <div>{user.Name}</div> */}
					<span className={`${styles.action} ${styles.account}`}>
						{currentUser?.HeadImgUrl ? <Avatar size={24} className={styles.avatar} src={currentUser?.HeadImgUrl} alt="avatar" /> 
						:<IconFont name='icon-touxiang' size="36" className={styles.avatar}></IconFont>}
						<span className={`${styles.name} anticon`}>{user.Name||user.UserName}</span>
					</span>
				</HeaderDropdown>
				<Button
				 	className={`${styles.action} ${styles.right}`}
					type="text"
					onClick={() => {
						const { dispatch } = this.props;

						if (dispatch) {

							dispatch({
								type: 'login/logout',
							});
						}
					}}>
					<LogoutOutlined  />
					退出
				</Button>
			</>
		) : (
			<span className={`${styles.action} ${styles.account}`}>
				<Spin
					size="small"
					style={{
						marginLeft: 8,
						marginRight: 8,
					}}
				/>
			</span>
		);
	}
}

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