import {MenuProps, Modal} from 'antd';
import {LogoutOutlined, EditFilled} from '@ant-design/icons';
import {useStore} from 'zustand';
import {userStore} from '@stores';
import {useNavigate} from 'react-router-dom';
import {LOGIN_PATH} from '@routes';
import {useBoolean} from 'ahooks';

export const items: MenuProps['items'] = [
  {key: 'editPassword', icon: <EditFilled />, label: '修改密码'},
  {key: 'logout', icon: <LogoutOutlined />, label: '退出登录'},
];

export function useLogout() {
  const logout = useStore(userStore, state => state.logout);
  const navigate = useNavigate();
  const [visible, {setTrue, setFalse}] = useBoolean();

  function onClick({key}: {key: string}) {
    switch (key) {
      case 'logout': {
        Modal.confirm({
          title: '退出登录',
          content: '你确定要退出登录吗？',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            logout();
            navigate(LOGIN_PATH);
          },
        });
        break;
      }
      case 'editPassword': {
        setTrue();
        break;
      }
    }
  }

  return [{visible}, {onClick, onClose: setFalse}] as const;
}
