var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import * as React from "react";
import { abbreviateNumber, cn } from "@utils";
import { avatarGroupVariants } from "./avatarGroupVariants";
import { Avatar } from "../avatar";
/**
 * Filter children to only include valid Avatar components with a label
 */
const filterChildren = (children) => {
    const filteredArray = [];
    if (Array.isArray(children)) {
        children.forEach((child) => {
            const { label } = child.props;
            if (child.type === Avatar && label) {
                filteredArray.push(child);
            }
        });
    }
    else {
        const { label } = children.props;
        if (children.type === Avatar && label) {
            filteredArray.push(children);
        }
    }
    return filteredArray;
};
/**
 * AvatarGroup component for displaying a group of avatars with overflow handling
 */
export const AvatarGroup = React.forwardRef((_a, ref) => {
    var { size = "md", maxItems = 4, className, children, onClick } = _a, props = __rest(_a, ["size", "maxItems", "className", "children", "onClick"]);
    const setMaxItems = maxItems && maxItems > 1 ? maxItems : 4;
    const filteredChildren = React.useMemo(() => filterChildren(children), [children]);
    const isClickable = Boolean(onClick);
    // Create the avatar elements
    const createAvatarElements = () => {
        return (_jsxs(_Fragment, { children: [filteredChildren.slice(0, setMaxItems).map((avatar, index) => (_createElement(Avatar, Object.assign({}, avatar.props, { key: `avatar-group-avatar-${index}`, size: size })))), filteredChildren.length > setMaxItems && (_jsx(Avatar, { label: `+${abbreviateNumber(filteredChildren.length - setMaxItems, 1, false)}`, abbreviate: false, size: size }))] }));
    };
    if (filteredChildren.length === 0) {
        return null;
    }
    return (_jsx("div", Object.assign({ ref: ref, className: cn(avatarGroupVariants({ clickable: isClickable }), className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined }, props, { children: createAvatarElements() })));
});
AvatarGroup.displayName = "AvatarGroup";
//# sourceMappingURL=avatarGroup.js.map