import { clsx } from 'clsx';
import AvatarView, { AvatarViewProps } from '../avatarView';
import { useDirection } from '../common/hooks';

type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
  AvatarViewProps,
  'selected' | 'size' | 'badge' | 'children' | 'interactive'
>;

export type Props = {
  /** @default [] */
  avatars: SingleAvatarType[];
  /** @default 'horizontal' */
  orientation?: 'horizontal' | 'diagonal';
  /** @default 48 */
  size?: AvatarViewProps['size'];
} & Pick<
  AvatarViewProps,
  'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
>;

export default function AvatarLayout({
  avatars = [],
  orientation: orientationProp = 'horizontal',
  size = 48,
  className,
  interactive,
  ...restProps
}: Props) {
  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 ? (
    <AvatarView {...avatars[0]} size={size}>
      {avatars[0].asset}
    </AvatarView>
  ) : (
    <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}
    >
      {avatars.map(({ asset, style, ...avatar }, index) => (
        <div
          // eslint-disable-next-line react/no-array-index-key
          key={index}
          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,
            },
          )}
        >
          <AvatarView
            {...avatar}
            size={avatarSize as Props['size']}
            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}
          >
            {asset}
          </AvatarView>
        </div>
      ))}
    </div>
  );
}

/** 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,
};