import React, { useCallback, useMemo } from 'react';
import { Avatar, Tooltip } from './index';

interface Member {
  id?: string;
  team_member_id?: string;
  name?: string;
  names?: string[];
  avatar_url?: string;
  color_code?: string;
  end?: boolean;
}

interface AvatarGroupProps {
  members: Member[];
  maxCount?: number;
  size?: number | 'small' | 'default' | 'large';
  isDarkMode?: boolean;
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
}

const AvatarGroup: React.FC<AvatarGroupProps> = ({
  members,
  maxCount,
  size = 28,
  isDarkMode = false,
  className = '',
  onClick,
}) => {
  const stopPropagation = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation();
      onClick?.(e);
    },
    [onClick]
  );

  const renderAvatar = useCallback(
    (member: Member, index: number) => {
      const memberName = member.end && member.names ? member.names.join(', ') : member.name || '';
      const displayName =
        member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase();

      return (
        <Tooltip
          key={member.team_member_id || member.id || index}
          title={memberName}
          isDarkMode={isDarkMode}
        >
          <Avatar
            name={member.name || ''}
            src={member.avatar_url}
            size={size}
            isDarkMode={isDarkMode}
            backgroundColor={member.color_code}
            onClick={stopPropagation}
            className="border-2 border-white"
            style={isDarkMode ? { borderColor: '#374151' } : {}}
          />
        </Tooltip>
      );
    },
    [stopPropagation, size, isDarkMode]
  );

  const visibleMembers = useMemo(() => {
    return maxCount ? members.slice(0, maxCount) : members;
  }, [members, maxCount]);

  const remainingCount = useMemo(() => {
    return maxCount ? Math.max(0, members.length - maxCount) : 0;
  }, [members.length, maxCount]);

  const avatarElements = useMemo(() => {
    return visibleMembers.map((member, index) => renderAvatar(member, index));
  }, [visibleMembers, renderAvatar]);

  const getSizeStyle = () => {
    if (typeof size === 'number') {
      return { width: size, height: size, fontSize: `${size * 0.4}px` };
    }

    const sizeMap = {
      small: { width: 24, height: 24, fontSize: '10px' },
      default: { width: 32, height: 32, fontSize: '14px' },
      large: { width: 48, height: 48, fontSize: '18px' },
    };

    return sizeMap[size];
  };

  return (
    <div onClick={stopPropagation} className={`flex -space-x-1 ${className}`}>
      {avatarElements}
      {remainingCount > 0 && (
        <Tooltip title={`${remainingCount} more`} isDarkMode={isDarkMode}>
          <div
            className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
              isDarkMode ? 'bg-gray-600 border-gray-700' : 'bg-gray-400 border-white'
            }`}
            style={getSizeStyle()}
            onClick={stopPropagation}
          >
            +{remainingCount}
          </div>
        </Tooltip>
      )}
    </div>
  );
};

export default AvatarGroup;