import { ROUTE_LOGIN, ROUTE_PROFILE } from '@/constants/routes';
import { clearAllData, clearSessionData, removeToken } from '@/utils/storage';
import {
  LogoutOutlined,
  SettingOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { history, useIntl } from '@umijs/max';

import { Dropdown } from 'antd';

// Avatar component with i18n support
export const AvatarDropdown = ({
  currentUserProfile,
}: {
  currentUserProfile?: MasterModel.UserResponse;
}) => {
  const intl = useIntl();
  return (
    <Dropdown
      menu={{
        items: [
          {
            key: ROUTE_PROFILE,
            icon: <SettingOutlined />,
            label: intl.formatMessage({ id: 'menu.profile' }),
            onClick: () => {
              history.push(ROUTE_PROFILE);
            },
          },
          {
            type: 'divider',
          },
          {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: intl.formatMessage({ id: 'common.logout' }),
            onClick: () => {
              removeToken();
              clearAllData();
              clearSessionData();
              window.location.href = ROUTE_LOGIN;
            },
          },
        ],
      }}
    >
      <div className="flex gap-2">
        <UserOutlined />
        <span className="font-sans">
          {currentUserProfile?.metadata?.full_name || ''}
        </span>
      </div>
    </Dropdown>
  );
};