import Badge from '../badge/Badge.mjs';
import BadgeAssets from '../badge/BadgeAssets.mjs';
import Dot from './Dot.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 '../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 { ProfileType } from '../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 } 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,
  badge,
  interactive = false,
  className,
  style,
  imgSrc,
  profileType,
  profileName,
  ...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,
        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)',
            '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`
          }),
          ...style
        },
        children: /*#__PURE__*/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
};
/** 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
};
/** 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__*/jsx(Dot, {
      avatarSize: size,
      variant: badgeAssets.type === 'online' ? 'online' : 'notification',
      children: children
    });
  }
  const badgeSize = MAP_BADGE_ASSET_SIZE[size];
  return /*#__PURE__*/jsx(Badge, {
    "aria-label": ariaLabel,
    size: badgeSize,
    badge: customBadge ? /*#__PURE__*/jsx(Circle, {
      fixedSize: true,
      size: badgeSize,
      children: customBadge
    }) : /*#__PURE__*/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
  });
}
function AvatarViewContent({
  children,
  imgSrc,
  profileName: name,
  profileType: type
}) {
  const [tryLoadImage, setTryLoadImage] = useState(true);
  if (children === undefined) {
    if (imgSrc && tryLoadImage) {
      return /*#__PURE__*/jsx(Image, {
        src: imgSrc,
        alt: "",
        onError: () => setTryLoadImage(false)
      });
    }
    if (type) {
      return type === ProfileType.BUSINESS ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile, {});
    }
    if (name) {
      return getInitials(name);
    }
    return /*#__PURE__*/jsx(Profile, {});
  }
  return children;
}

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