'use strict';

var Badge = require('../badge/Badge.js');
var BadgeAssets = require('../badge/BadgeAssets.js');
var NotificationDot = require('./NotificationDot.js');
var Circle = require('../common/circle/Circle.js');
var Image = require('../image/Image.js');
var React = require('react');
var clsx = require('clsx');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
var profileType = require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
var initials = require('../common/initials.js');
var Icons = require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');

function AvatarView({
  children = undefined,
  size = 48,
  selected,
  notification,
  badge,
  interactive = false,
  className,
  style,
  imgSrc,
  profileType,
  profileName,
  ...restProps
}) {
  return /*#__PURE__*/jsxRuntime.jsx(Circle, {
    size: size,
    fixedSize: true,
    className: clsx.clsx('np-avatar-view', interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive', {
      'np-avatar-view-selected': selected
    }, className),
    ...restProps,
    children: /*#__PURE__*/jsxRuntime.jsx(Badges, {
      avatar: {
        size,
        notification,
        selected
      },
      ...badge,
      children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
        size: size,
        fixedSize: true,
        className: clsx.clsx('np-avatar-view-content'),
        enableBorder: !interactive || selected,
        style: {
          ...(selected && {
            '--circle-border-color': 'var(--color-interactive-primary)'
          }),
          ...style
        },
        children: /*#__PURE__*/jsxRuntime.jsx(AvatarViewContent, {
          imgSrc,
          profileType,
          profileName,
          children: children
        })
      })
    })
  });
}
/** Size of badge depends on size of avatar */
const MAP_BADGE_ASSET_SIZE = {
  16: 16,
  24: 16,
  32: 16,
  40: 16,
  48: 16,
  56: 24,
  72: 24
};
/** Certain sizes of AvatarView has a custom offset for badge */
const MAP_BADGE_POSITION = {
  24: -6,
  32: -4
};
/**
 * Adds build-in badges to AvatarView
 */
function Badges({
  children,
  avatar,
  'aria-label': ariaLabel,
  asset: customBadge,
  ...badgeAssets
}) {
  const {
    size = 48,
    selected,
    notification
  } = avatar;
  const anyBadge = Object.values({
    customBadge,
    ...badgeAssets
  }).filter(Boolean).length > 0;
  if ((anyBadge || selected) && size > 16) {
    const badgeSize = MAP_BADGE_ASSET_SIZE[size];
    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
      "aria-label": ariaLabel,
      size: badgeSize,
      badge: customBadge ? /*#__PURE__*/jsxRuntime.jsx(Circle, {
        fixedSize: true,
        size: badgeSize,
        children: customBadge
      }) : /*#__PURE__*/jsxRuntime.jsx(BadgeAssets, {
        ...(selected ? {
          status: 'positive'
        } : badgeAssets),
        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__*/jsxRuntime.jsx(NotificationDot, {
      avatarSize: size,
      children: children
    });
  }
  return children;
}
function AvatarViewContent({
  children,
  imgSrc,
  profileName: name,
  profileType: type
}) {
  const [tryLoadImage, setTryLoadImage] = React.useState(true);
  if (children === undefined) {
    if (imgSrc && tryLoadImage) {
      return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
        src: imgSrc,
        alt: "",
        onError: () => setTryLoadImage(false)
      });
    }
    if (type) {
      return type === profileType.ProfileType.BUSINESS ? /*#__PURE__*/jsxRuntime.jsx(Icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(Icons.Profile, {});
    }
    if (name) {
      return initials.getInitials(name);
    }
    return /*#__PURE__*/jsxRuntime.jsx(Icons.Profile, {});
  }
  return children;
}

module.exports = AvatarView;
//# sourceMappingURL=AvatarView.js.map
