import React, { useState } from 'react'
import "./styles.scss";
import { Avatar, AvatarGroup } from '@mui/material';
import { UserAvatarsListProps } from '../types';

export const UserAvatars = (props: UserAvatarsListProps) => {
    const { 
        users, 
        max = 4, 
        spacing = 10, 
        size = "medium", 
        variant = "circular", 
        className, 
        onClick, 
        onClickShowMore,
        selectedUserIds = [],
        surplus
    } = props;

    const [hoveredUser, setHoveredUser] = useState<string | null>(null);

    const handleMouseEnter = (id: string) => {
        setHoveredUser(id);
    }

    const handleMouseLeave = () => {
        setHoveredUser(null);
    }

    // Check if any users are selected
    const hasSelectedUsers = selectedUserIds.length > 0;

    // Format surplus number for display
    const formatSurplus = (surplusValue: number): string => {
      return surplusValue > 999 ? "+999" : `+${surplusValue}`;
    };

  return (
    <div className={className}>
        <div className="avatars-list">
            <AvatarGroup 
              max={max} 
              variant={variant} 
              spacing={spacing} 
              renderSurplus={(calculatedSurplus) => {
                  // Use the provided surplus from props if defined, otherwise use the calculated one
                  const surplusToShow = surplus !== undefined ? surplus : calculatedSurplus;
                  
                  return (
                    <span 
                      className={`surplus ${hasSelectedUsers ? 'surplus-active' : ''}`}
                      onClick={() => onClickShowMore?.(surplusToShow)}
                      onMouseEnter={() => handleMouseEnter("137demo")}
                      style={{ 
                        zIndex: hoveredUser === "137demo" ? 1 : 0,
                        backgroundColor: hasSelectedUsers ? 'var(--color-blue-gtc, #005BF8)' : undefined,
                        color: hasSelectedUsers ? '#fff' : undefined
                      }}
                      onMouseLeave={handleMouseLeave}
                    >
                      {formatSurplus(surplusToShow)}
                    </span>
                  );
              }}
            >
                {users.map((user) => {
                    const isSelected = selectedUserIds.includes(user.id);
                    
                    return (
                        <Avatar
                            key={user.id}
                            id={user.id}
                            style={{ 
                                width: size === 'small' ? 24 : size === 'large' ? 56 : 40,
                                height: size === 'small' ? 24 : size === 'large' ? 56 : 40,
                                borderRadius: variant === 'circular' ? '50%' : variant === 'rounded' ? '4px' : '0',
                                border: 'none',
                                outline: isSelected ? '2.5px solid var(--color-blue-gtc, #005BF8)' : 'none',
                                zIndex: hoveredUser === user.id ? 1 : 0 
                            }}
                            alt={user.name}
                            src={user.avatar && user.avatar.trim() !== "" ? user.avatar : undefined}
                            onMouseEnter={() => handleMouseEnter(user.id)}
                            onMouseLeave={handleMouseLeave}
                            onClick={() => onClick?.(user.id)}
                        >
                          {(!user.avatar || user.avatar.trim() === "") && user.name ? user.name[0].toUpperCase() : null}
                        </Avatar>
                    );
                })}
            </AvatarGroup>
        </div>
    </div>
  )
}