'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Badge = require('../badge/Badge.js');
var BadgeAssets = require('../badge/BadgeAssets.js');
var Dot = require('./Dot.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('@transferwise/neptune-tokens');
require('../common/propsValues/control.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');
require('@transferwise/formatting');
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,
  badge,
  interactive = false,
  className,
  style,
  imgSrc,
  profileType,
  profileName,
  ...restProps
}) {
  return /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
    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,
        selected
      },
      ...badge,
      children: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
        size: size,
        fixedSize: true,
        className: clsx.clsx('np-avatar-view-content'),
        enableBorder: !interactive || selected,
        style: {
          ...(selected && {
            '--circle-border-color': 'var(--color-interactive-primary)',
            '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`
          }),
          ...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,
  88: 24,
  96: 24
};
/** Border width for `selected` state determined by avatar size */
const MAP_SELECTED_BORDER_WIDTH = {
  16: 1,
  24: 1,
  32: 1,
  40: 2,
  48: 2,
  56: 2,
  72: 2,
  88: 2,
  96: 2
};
/** 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
  } = avatar;
  const anyBadge = Object.values({
    customBadge,
    ...badgeAssets
  }).filter(Boolean).length > 0;
  if (!anyBadge && !selected || size <= 16) {
    return children;
  }
  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {
    return /*#__PURE__*/jsxRuntime.jsx(Dot.default, {
      avatarSize: size,
      variant: badgeAssets.type === 'online' ? 'online' : 'notification',
      children: children
    });
  }
  const badgeSize = MAP_BADGE_ASSET_SIZE[size];
  return /*#__PURE__*/jsxRuntime.jsx(Badge.default, {
    "aria-label": ariaLabel,
    size: badgeSize,
    badge: customBadge ? /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
      fixedSize: true,
      size: badgeSize,
      children: customBadge
    }) : /*#__PURE__*/jsxRuntime.jsx(BadgeAssets.default, {
      ...(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
  });
}
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;
}

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