import type { FC } from 'react';
import { connect } from 'umi';
import { Dropdown, Space } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import type { UserConnectedProps } from '@/models/user';
import './index.less';
import IconFont from '../IconFont';

const Avatar: FC<UserConnectedProps> = (props) => {
  const {
    user: { data }, dispatch,
  } = props;
  console.log('user32323', data);


  const handleLogout = () => {
    dispatch?.({
      type: 'user/logout',
    });
  };

  const items = [
    {
      key: 'logout',
      label: (
        <a
          onClick={handleLogout}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '0 8px',
          }}
        >
          <LogoutOutlined />
          <span>退出登录</span>
        </a>
      ),
    },
  ];

  return (
    <Dropdown
      menu={{ items }}
    >
      <Space className="avatar-container">
        {
          data.avatarUrl ? <img
            alt="avatar"
            src={data.avatarUrl}
            className="avatar"
          /> :
            <IconFont name='icon-touxiang' size="36" ></IconFont>
        }

        <span className="username">{data.adminName}</span>
      </Space>
    </Dropdown>
  );
};

export default connect(
  ({ user }: { user: UserConnectedProps['user'] }) => ({
    user,
  }),
)(Avatar);