import React from 'react';
import { Zoom, Tooltip } from '@mui/material';

import { User, UserCardProps } from '../types';
import { renderAvatar } from '../components';

interface TooltipAvatarProps extends UserCardProps {
  user: User;
  avatarSize: number;
  shouldShowHoverCard: boolean;
  renderCardContent?: () => React.ReactNode | null;
  tooltipTitle?: string;
  tooltipProps?: UserCardProps['tooltipProps'];
  avatarProps?: UserCardProps['avatarProps'];
}

/**
 * 统一处理头像的Tooltip显示组件
 * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
 */
function TooltipAvatar({
  user,
  avatarSize,
  shouldShowHoverCard,
  renderCardContent = undefined,
  tooltipTitle = undefined,
  tooltipProps = undefined,
  avatarProps = undefined,
  onAvatarClick,
}: TooltipAvatarProps) {
  const avatarElement = renderAvatar(
    user,
    avatarSize,
    avatarProps,
    onAvatarClick,
    shouldShowHoverCard || !!tooltipTitle
  );
  // 使用普通文本Tooltip
  if (tooltipTitle) {
    return (
      <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom" {...(tooltipProps ?? {})}>
        {avatarElement}
      </Tooltip>
    );
  }

  // 使用自定义内容Tooltip
  if (shouldShowHoverCard) {
    return (
      <Tooltip
        enterDelay={200}
        title={renderCardContent ? renderCardContent() : null}
        placement="bottom"
        arrow={false}
        {...(tooltipProps ?? {})}
        slotProps={{
          popper: {
            sx: {
              '& .MuiTooltip-tooltip': {
                backgroundColor: 'transparent',
                p: 0,
                maxWidth: 500,
                zIndex: 1000,
              },
            },
          },
        }}
        slots={{
          transition: Zoom,
        }}>
        {avatarElement}
      </Tooltip>
    );
  }

  // 无Tooltip
  return avatarElement;
}

export default TooltipAvatar;
