import { UserOutlined } from "@ant-design/icons";
import { Avatar, Tooltip } from "antd";
import { Constants } from "../../utils";

export function MyAvatar({
  avatarWidth,
  avatar,
  tooltip,
  tooltipTitle,
  allUsers,
  userId,
}) {
  if (!avatar) {
    if (allUsers && userId) {
      const user = allUsers.find((u) => u.Id === userId);
      if (user) {
        avatar = user.Avatar;
        tooltipTitle = user.Username;
      }
    }
  }

  const avatarContent = avatar ? (
    <Avatar
      size={avatarWidth}
      src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
    />
  ) : (
    <Avatar size={avatarWidth} icon={<UserOutlined />} />
  );

  return tooltip ? (
    <Tooltip placement="top" trigger="hover" title={tooltipTitle}>
      {avatarContent}
    </Tooltip>
  ) : (
    avatarContent
  );
}

export function MyUserAvatar({ avatar, size = "default" }) {
  if (avatar === "") return <Avatar icon={<UserOutlined />} size={size} />;

  return (
    <Avatar
      src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
      size={size}
    />
  );
}