var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
/**
 * A container component for grouping multiple avatars with consistent styling.
 *
 * AvatarGroup wraps multiple avatar elements and provides:
 * - Overflow handling (shows "+N" for excess avatars)
 * - Consistent spacing and ring borders
 * - Size inheritance for all child avatars
 *
 * @element btu-avatar-group
 *
 * Ring styling is inherited from child `btu-avatar` elements. Override via
 * `--avatar-ring-color` and `--avatar-ring-width` on the group or on individual avatars.
 *
 * @fires {CustomEvent} btu-avatar-group-ready - Fired after first render and initialization
 * @fires {CustomEvent<{hidden: number}>} btu-avatar-group-overflow - Fired when avatars are hidden due to max limit
 *
 * @example
 * ```html
 * <!-- Basic group -->
 * <btu-avatar-group max="3">
 *   <btu-avatar src="..." fallback="AB"></btu-avatar>
 *   <btu-avatar src="..." fallback="DG"></btu-avatar>
 *   <btu-avatar fallback="JP"></btu-avatar>
 * </btu-avatar-group>
 * ```
 */
export default class AvatarGroup extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Size variant for all child avatars (unless individually overridden)
         * @attr
         */
        this.size = 'md';
        /** @internal */
        this.initialClasses = [];
        /** @internal */
        this.overflowAvatar = null;
        /** @internal */
        this.managedAvatars = new Set();
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim());
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate() {
        const classes = [
            ...this.initialClasses,
            'btu-avatar-group',
            'flex',
            'items-center',
            '-space-x-2',
            '*:ring-2',
            '*:ring-white',
            'dark:*:ring-gray-900',
        ];
        this.className = classes.join(' ');
    }
    firstUpdated() {
        this.processAvatars();
        this.emit('btu-avatar-group-ready');
    }
    /**
     * Process all avatar children: apply size, handle overflow
     * Call this method when avatars are dynamically added or removed
     */
    processAvatars() {
        const avatars = Array.from(this.querySelectorAll('btu-avatar'));
        // Remove existing overflow avatar if present
        if (this.overflowAvatar) {
            this.overflowAvatar.remove();
            this.overflowAvatar = null;
        }
        // Determine visible count
        const visibleCount = this.max || avatars.length;
        const hiddenCount = Math.max(0, avatars.length - visibleCount);
        avatars.forEach((avatar, index) => {
            // Hide excess avatars
            if (this.max && index >= this.max) {
                avatar.style.display = 'none';
                return;
            }
            // Show previously hidden avatars if max increased
            avatar.style.display = '';
            // Track avatars that should inherit size from group
            // (those that don't have an explicit size attribute initially)
            if (!avatar.hasAttribute('size') && !this.managedAvatars.has(avatar)) {
                this.managedAvatars.add(avatar);
            }
            // Update size for managed avatars
            if (this.managedAvatars.has(avatar)) {
                avatar.setAttribute('size', this.size);
            }
        });
        // Create "+N" overflow avatar if needed
        if (hiddenCount > 0) {
            this.createOverflowAvatar(hiddenCount);
            this.emit('btu-avatar-group-overflow', { hidden: hiddenCount });
        }
    }
    /**
     * Create and append the overflow avatar showing "+N"
     * @internal
     */
    createOverflowAvatar(count) {
        // Dynamically import Avatar to create instance
        const overflow = document.createElement('btu-avatar');
        overflow.setAttribute('fallback', `+${count}`);
        overflow.setAttribute('size', this.size);
        overflow.classList.add('btu-avatar-group-overflow');
        this.appendChild(overflow);
        this.overflowAvatar = overflow;
    }
    updated(changedProperties) {
        // Reprocess avatars if max or size changed
        if (changedProperties.has('max') || changedProperties.has('size')) {
            this.processAvatars();
        }
    }
    render() {
        return html ``;
    }
}
__decorate([
    property({ type: Number })
], AvatarGroup.prototype, "max", void 0);
__decorate([
    property({ type: String })
], AvatarGroup.prototype, "size", void 0);
if (!customElements.get('btu-avatar-group')) {
    customElements.define('btu-avatar-group', AvatarGroup);
}
//# sourceMappingURL=AvatarGroup.js.map