import { Apis } from '@/gen/Apis';
import {
  LogoutOutlined,
  UnlockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { history } from '@umijs/max';
import { Avatar, Dropdown, MenuProps, Space } from 'antd';
import { useState } from 'react';
import { stateActions } from '../../libs/valtio/actions';
import ChangePassword from './ChangePassword';

export default function AvatarProps({ user }: { user: any }) {
  const [open, setOpen] = useState(false);
  const [openDrawer, setOpenDrawer] = useState(false);
  const showDrawer = () => {
    setOpenDrawer(true);
  };
  const onClose = () => {
    setOpenDrawer(false);
  };
  const items: MenuProps['items'] = [
    {
      key: 'changePassword',
      label: (
        <Space
          onClick={() => {
            setOpen(true);
          }}
        >
          <UnlockOutlined />
          修改密码
        </Space>
      ),
    },
    {
      key: 'logout',
      label: (
        <Space
          onClick={() => {
            Apis.Common.Auth.Logout().then(() => {
              stateActions.setLogout();
              history.push('/login');
            });
          }}
        >
          <LogoutOutlined />
          退出登录
        </Space>
      ),
    },
  ];

  return (
    <>
      <Space>
        <Dropdown menu={{ items }} placement="bottomRight">
          <Space>
            <Avatar
              style={{ backgroundColor: '#87d068' }}
              icon={<UserOutlined />}
              size={28}
            />
            <span>{user?.username}</span>
          </Space>
        </Dropdown>
      </Space>
      <ChangePassword open={open} setOpen={setOpen} />
    </>
  );
}
