import Badge from '../badge/Badge.mjs';
import BadgeAssets from '../badge/BadgeAssets.mjs';
import NotificationDot from './NotificationDot.mjs';
import Circle from '../common/circle/Circle.mjs';
import Image from '../image/Image.mjs';
import { useState } from 'react';
import { clsx } from 'clsx';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import { getInitials } from '../common/initials.mjs';
import { Briefcase, Profile as Profile$1 } from '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx } from 'react/jsx-runtime';

function AvatarView({
  children = undefined,
  size = 48,
  selected,
  notification,
  badge,
  interactive = false,
  className,
  style,
  imgSrc,
  type,
  name,
  ...restProps
}) {
  return /*#__PURE__*/jsx(Circle, {
    size: size,
    fixedSize: true,
    className: clsx('np-avatar-view', interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive', {
      'np-avatar-view-selected': selected
    }, className),
    ...restProps,
    children: /*#__PURE__*/jsx(Badges, {
      avatar: {
        size,
        notification,
        selected
      },
      ...badge,
      children: /*#__PURE__*/jsx(Circle, {
        size: size,
        fixedSize: true,
        className: clsx('np-avatar-view-content'),
        enableBorder: !interactive || selected,
        style: {
          ...(selected && {
            '--circle-border-color': 'var(--color-interactive-primary)'
          }),
          ...style
        },
        children: children === undefined ? /*#__PURE__*/jsx(Profile, {
          imgSrc,
          type,
          name
        }) : children
      })
    })
  });
}
/** Size of badge depends on size of avatar */
const MAP_BADGE_ASSET_SIZE = {
  16: 'sm',
  24: 'sm',
  32: 'sm',
  40: 'sm',
  48: 'sm',
  56: 'lg',
  72: 'lg'
};
/** Certain sizes of AvatarView has a custom offset of Badge */
const MAP_BADGE_POSITION = {
  24: -6,
  32: -4
};
/**
 * Adds build-in badges to AvatarView
 */
function Badges({
  children,
  avatar,
  ...badge
}) {
  const {
    size = 48,
    selected,
    notification
  } = avatar;
  const anyCustomBadge = Object.keys(badge).length > 0;
  if ((anyCustomBadge || selected) && size > 16) {
    const badgeSize = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;
    return /*#__PURE__*/jsx(Badge, {
      size: badgeSize,
      badge: /*#__PURE__*/jsx(BadgeAssets, {
        ...(selected ? {
          status: 'positive'
        } : badge),
        size: badgeSize
      }),
      style: {
        // @ts-expect-error CSS custom props allowed
        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`
      },
      children: children
    });
  }
  if (notification) {
    return /*#__PURE__*/jsx(NotificationDot, {
      avatarSize: size,
      children: children
    });
  }
  return children;
}
/**
 * Common logic for entities (personal & business profiles or recipients)
 */
function Profile({
  imgSrc,
  name,
  type
}) {
  const [tryLoadImage, setTryLoadImage] = useState(true);
  if (imgSrc && tryLoadImage) {
    return /*#__PURE__*/jsx(Image, {
      src: imgSrc,
      alt: "",
      onError: () => setTryLoadImage(false)
    });
  }
  if (type) {
    return type.toLowerCase() === 'business' ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile$1, {});
  }
  if (name) {
    return getInitials(name);
  }
  return /*#__PURE__*/jsx(Profile$1, {});
}

export { AvatarView as default };
//# sourceMappingURL=AvatarView.mjs.map
