import React from 'react';

import type { AvatarGroupItem, AvatarGroupProps } from '../../../../types/avatar-group';
import { View } from '../../../layout/public';
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
import { Avatar } from '../../public';
/***
 * Renders a compact group of avatars with optional overflow handling.
 */
export const AvatarGroup = withZoraThemeScope(AvatarGroupInner);

function defaultOverflowLabel(overflowCount: number): string {
  return `+${overflowCount}`;
}

function AvatarGroupInner({
  themeId: _themeId,
  mode: _mode,
  interactionPolicy: _interactionPolicy,
  testID,
  items,
  max = 4,
  size = 's',
  shape = 'circle',
  overflowLabel = defaultOverflowLabel,
}: AvatarGroupProps) {
  const { theme } = useZoraTheme();

  const visibleItems = items.slice(0, max);
  const overflowCount = Math.max(0, items.length - visibleItems.length);
  const overlap =
    size === 'xs' ? 8 : size === 's' ? 10 : size === 'm' ? 12 : size === 'l' ? 14 : 16;
  const borderColor = theme.semantics.surface.default;

  const renderItem = (item: AvatarGroupItem, index: number) => (
    <View
      key={item.id ?? `${index}`}
      ml={index === 0 ? 0 : -overlap}
      radius="full"
      borderWidth={2}
      borderColor={borderColor}
    >
      <Avatar
        iconFallback={item.iconFallback}
        initials={item.initials}
        label={item.label}
        name={item.name}
        shape={shape}
        size={size}
        source={item.source}
        color={item.color}
      />
    </View>
  );

  return (
    <View align="center" direction="row" testID={testID} wrap="nowrap">
      {visibleItems.map(renderItem)}
      {overflowCount > 0 ? (
        <View
          ml={visibleItems.length === 0 ? 0 : -overlap}
          radius="full"
          borderWidth={2}
          borderColor={borderColor}
        >
          <Avatar
            initials={overflowLabel(overflowCount)}
            size={size}
            shape={shape}
            color="neutral"
          />
        </View>
      ) : null}
    </View>
  );
}