import { clsx } from 'clsx';
import AvatarView from '../avatarView/AvatarView.mjs';
import '@transferwise/neptune-validation';
import 'react';
import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
import '../common/propsValues/breakpoint.mjs';
import { jsx } from 'react/jsx-runtime';

function AvatarLayout({
  avatars = [],
  orientation: orientationProp = 'horizontal',
  size = 48,
  className,
  interactive,
  ...restProps
}) {
  const orientation = size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;
  const {
    isRTL
  } = useDirection();
  const isDiagonal = orientation === 'diagonal';
  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
  return avatars.length < 1 ? null : avatars.length === 1 ? /*#__PURE__*/jsx(AvatarView, {
    ...avatars[0],
    size: size,
    children: avatars[0].asset
  }) : /*#__PURE__*/jsx("div", {
    className: clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className),
    style: {
      // @ts-expect-error CSS custom props allowed
      '--np-avatar-layout-size': `${size}px`,
      '--np-avatar-size': `${avatarSize}px`,
      '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
      '--np-avatar-avatars-count': avatars.length
    },
    ...restProps,
    children: avatars.map(({
      asset,
      style,
      ...avatar
    }, index) => /*#__PURE__*/jsx("div", {
      className: clsx({
        [`np-avatar-layout-${orientation}-child`]: !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0
      }, {
        [`np-avatar-layout-${orientation}-mask`]: !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1
      }),
      children: /*#__PURE__*/jsx(AvatarView, {
        ...avatar,
        size: avatarSize,
        style: {
          ...(isDiagonal && {
            '--circle-size': `${avatarSize}px`,
            '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
            '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`
          }),
          ...style
        },
        interactive: interactive,
        children: asset
      })
    }, index))
  });
}
/** Diagonal layout have custom sizes for avatar, font and icon */
const DIAGONAL_LAYOUT_STYLE_CONFIG = {
  // Diagonal layout doesn't support 16 size
  16: {
    avatarSize: undefined,
    offset: undefined,
    fontSize: undefined,
    iconSize: undefined
  },
  24: {
    avatarSize: 16,
    offset: 2.5,
    fontSize: 8,
    iconSize: 11.25
  },
  32: {
    avatarSize: 20,
    offset: 2.5,
    fontSize: 12,
    iconSize: 15
  },
  40: {
    avatarSize: 24,
    offset: 4.5,
    fontSize: 12,
    iconSize: 18
  },
  48: {
    avatarSize: 30,
    offset: 3.5,
    fontSize: 14,
    iconSize: 16.87
  },
  56: {
    avatarSize: 34,
    offset: 5,
    fontSize: 14,
    iconSize: 19.12
  },
  72: {
    avatarSize: 44,
    offset: 6,
    fontSize: 22,
    iconSize: 22
  }
};
/** Horizontal layout have custom offset between avatars */
const HORIZONTAL_LAYOUT_OFFSET = {
  16: 2,
  24: 2,
  32: 7,
  40: 4,
  48: 4,
  56: 6,
  72: 8
};

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