import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState, useMemo } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { Avatar } from '../Avatar/Avatar.js';
import { cn } from '../../../utils/cn.js';
import { avatarGroupTheme } from './AvatarGroup.theme.js';
import { getAnimationState, getAvatarGroupVariants } from './AvatarGroup.animations.js';

const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "md", spacing = "normal", direction = "row", overflowIndicator, className, ariaLabel = "Group of users", shouldAnimate = true, ...props }, ref) => {
    const [hoveredIndex, setHoveredIndex] = useState(null);
    const shouldReduceMotion = useReducedMotion();
    const enableAnimations = shouldAnimate && !shouldReduceMotion;
    // Memoize expensive calculations to prevent unnecessary re-renders
    const memoizedData = useMemo(() => {
        const visibleAvatars = avatars.slice(0, max);
        const overflowCount = avatars.length > max ? avatars.length - max : 0;
        const spacingClass = avatarGroupTheme.spacingStyles[spacing];
        const directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
        const totalPeople = avatars.length;
        const groupDescription = avatars
            .map((avatar) => avatar.name || "User")
            .join(", ");
        return {
            visibleAvatars,
            overflowCount,
            spacingClass,
            directionClass,
            totalPeople,
            groupDescription,
        };
    }, [avatars, max, spacing, direction]);
    const { visibleAvatars, overflowCount, spacingClass, directionClass, totalPeople, groupDescription, } = memoizedData;
    return (jsxs("div", { ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className), role: "group", "aria-label": ariaLabel, "aria-description": `Contains ${totalPeople} users: ${groupDescription}`, "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: () => enableAnimations && setHoveredIndex(null), ...props, children: [visibleAvatars.map((avatarProps, index) => {
                // Create contextual label for individual avatars in a group
                const position = index + 1;
                const contextLabel = avatarProps.contextualLabel || ` (${position} of ${totalPeople})`;
                const MotionDiv = enableAnimations ? motion.div : "div";
                const motionProps = enableAnimations
                    ? {
                        variants: getAvatarGroupVariants(shouldReduceMotion, enableAnimations),
                        animate: getAnimationState(index, hoveredIndex, enableAnimations),
                        onHoverStart: () => setHoveredIndex(index),
                        whileHover: "hover",
                    }
                    : {};
                return (jsx(MotionDiv, { className: cn(
                    // First avatar doesn't need negative margin
                    index > 0 ? spacingClass : "z-10"), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
                        // Ensure that groupPosition is not passed to avoid conflicts
                        groupPosition: undefined }) }, index));
            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, "self-center"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
});
// Set display name for dev tools and Storybook
AvatarGroup.displayName = "AvatarGroup";

export { AvatarGroup };
