import { Apis } from '@/gen/Apis';
import {
  DownOutlined,
  LogoutOutlined,
  UnlockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { history } from '@umijs/max';
import { Avatar, Dropdown, MenuProps, Space } from 'antd';
import { useEffect, useState } from 'react';
import { stateActions } from '../../libs/valtio/actions';
import AvatarIcon from './AvatarIcon.png';
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();
              sessionStorage.removeItem('loginUserInfo');
              history.push('/login');
            });
          }}
        >
          <LogoutOutlined />
          退出登录
        </Space>
      ),
    },
  ];

  useEffect(() => {
    let loginUserInfo = sessionStorage.getItem('loginUserInfo');
    console.log(loginUserInfo, 'loginUserInfo');
    if (loginUserInfo === 'I0xZMDEyM18wMQ==') {
      setOpen(true);
      console.log('登录成功');
    }
  }, []);

  return (
    <>
      <Dropdown menu={{ items }} trigger={['click']}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            <Avatar icon={<UserOutlined />} src={AvatarIcon} size={28} />
            <span>{user?.name}</span>
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
      <ChangePassword open={open} setOpen={setOpen} />
    </>
  );
}