import React, { useCallback } from "react";
import { history, useAuth, useLoginState } from "ice";
import { LogoutOutlined } from "@ant-design/icons";
import { Dropdown, Avatar, message } from "antd";
import type { MenuInfo } from "rc-menu/lib/interface";
import styles from "./index.module.css";
import store from "@/store";
import { proxyApi } from "@/apis";

interface AvatarDropdownProps {
  name: string;
  avatar: string;
}

const AvatarDropdown: React.FC<AvatarDropdownProps> = ({ name, avatar }) => {
  const [, userDispatcher] = store.useModel("user");
  const [, setAuth] = useAuth();
  const [, setLoginState] = useLoginState();

  const loginOut = async () => {
    const data = await proxyApi.auth.logout();
    if (data) {
      userDispatcher.updateCurrentUser(null);
      setAuth({});
      setLoginState(false);
      const pathname = history?.location?.pathname;
      history?.push({
        pathname: "/login",
        search: pathname ? `redirect=${pathname}` : "",
      });
    } else {
      message.error("退出失败");
    }
  };

  const onMenuClick = useCallback((event: MenuInfo) => {
    const { key } = event;
    if (key === "logout") {
      loginOut();
    }
  }, []);

  const menu = {
    items: [
      {
        key: "logout",
        label: "退出登录",
        icon: <LogoutOutlined />,
        onClick: onMenuClick,
        className: styles.menu,
      },
    ],
  };
  return (
    <Dropdown menu={menu}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar
          size="small"
          className={styles.avatar}
          src={avatar}
          alt="avatar"
        />
        <span>{name}</span>
      </span>
    </Dropdown>
  );
};

export default AvatarDropdown;