import { Avatar, Tooltip } from 'antd';
import React, { useCallback, useMemo } from 'react';
import { InlineMember } from '@/types/teamMembers/inlineMember.types';

interface AvatarsProps {
  members: InlineMember[];
  maxCount?: number;
}

const Avatars: React.FC<AvatarsProps> = React.memo(({ members, maxCount }) => {
  const stopPropagation = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
  }, []);

  const renderAvatar = useCallback((member: InlineMember, index: number) => (
    <Tooltip
      key={member.team_member_id || index}
      title={member.end && member.names ? member.names.join(', ') : member.name}
    >
      {member.avatar_url ? (
        <span onClick={stopPropagation}>
          <Avatar src={member.avatar_url} size={28} key={member.team_member_id || index} />
        </span>
      ) : ( 
        <span onClick={stopPropagation}>
          <Avatar
            size={28}
            key={member.team_member_id || index}
            style={{
              backgroundColor: member.color_code || '#ececec',
              fontSize: '14px',
            }}
          >
            {member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase()}
          </Avatar>
        </span>
      )}
    </Tooltip>
  ), [stopPropagation]);

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

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

  return (
    <div onClick={stopPropagation}>
      <Avatar.Group>
        {avatarElements}
      </Avatar.Group>
    </div>
  );
});

Avatars.displayName = 'Avatars';

export default Avatars;
