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, state } from 'lit/decorators.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import { TooltipMixin } from '../../util/TooltipMixin.js';
/**
 * An avatar component for displaying user profile images with fallback support.
 *
 * Avatars display user profile images with automatic fallback to initials when
 * the image fails to load or is not provided.
 *
 * @element btu-avatar
 *
 * @fires {CustomEvent} btu-avatar-ready - Fired after first render and initialization
 * @fires {CustomEvent<{src: string}>} btu-avatar-image-loaded - Fired when image successfully loads
 * @fires {CustomEvent<{src: string, error: Event}>} btu-avatar-image-error - Fired when image fails to load
 *
 * @cssprop --avatar-size - Custom size (overrides size prop)
 * @cssprop --avatar-bg-color - Fallback background color (default: purple-600)
 * @cssprop --avatar-corner-rounding - How rounded is the avatar (default: circle)
 * @cssprop --avatar-ring-color - Optional ring border color
 * @cssprop --avatar-ring-width - Ring border width (default: 2px)
 *
 * @example
 * ```html
 * <!-- Avatar with image -->
 * <btu-avatar src="#" alt="John Doe" fallback="JD"></btu-avatar>
 *
 * <!-- Avatar with fallback only -->
 * <btu-avatar fallback="JD" size="lg"></btu-avatar>
 * ```
 */
export default class Avatar extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        /**
         * Image source URL
         * @attr
         */
        this.src = '';
        /**
         * Alt text for the image
         * @attr
         */
        this.alt = '';
        /**
         * Fallback text (typically user initials)
         * @attr
         */
        this.fallback = '';
        /**
         * Size variant.
         * - 'xs': Extra small (1.5rem)
         * - 'sm': Small (2.25rem)
         * - 'md': Medium (2.5rem) - default
         * - 'lg': Large (3rem)
         * - 'xl': Extra large (3.5rem)
         * - 'xxl': Extra extra large (4rem)
         * @attr
         */
        this.size = 'md';
        /** @internal */
        this.initialClasses = [];
        /** @internal */
        this.imageLoaded = false;
        /** @internal */
        this.imageError = false;
    }
    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',
            `btu-avatar-${this.size}`,
            this.imageLoaded ? 'btu-avatar-image-loaded' : '',
        ];
        this.className = classes.filter(Boolean).join(' ');
    }
    firstUpdated() {
        this.emit('btu-avatar-ready');
        // Setup image load/error handlers if src is provided
        if (this.src) {
            const img = this.querySelector('img');
            if (img) {
                img.addEventListener('load', () => {
                    this.imageLoaded = true;
                    this.imageError = false;
                    this.emit('btu-avatar-image-loaded', { src: this.src });
                });
                img.addEventListener('error', error => {
                    this.imageLoaded = false;
                    this.imageError = true;
                    this.emit('btu-avatar-image-error', { src: this.src, error });
                });
            }
        }
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        // Reset image error state when src changes
        if (changedProperties.has('src')) {
            this.imageError = false;
            this.imageLoaded = false;
            // Setup handlers for new image
            if (this.src) {
                const img = this.querySelector('img');
                if (img) {
                    img.addEventListener('load', () => {
                        this.imageLoaded = true;
                        this.imageError = false;
                        this.emit('btu-avatar-image-loaded', { src: this.src });
                    });
                    img.addEventListener('error', error => {
                        this.imageLoaded = false;
                        this.imageError = true;
                        this.emit('btu-avatar-image-error', { src: this.src, error });
                    });
                }
            }
        }
    }
    render() {
        return html `
      <div class="btu-avatar-fallback">${this.fallback}</div>
      ${this.src && !this.imageError ? html `<img src="${this.src}" alt="${this.alt}" />` : ''}
    `;
    }
}
__decorate([
    property({ type: String })
], Avatar.prototype, "src", void 0);
__decorate([
    property({ type: String })
], Avatar.prototype, "alt", void 0);
__decorate([
    property({ type: String })
], Avatar.prototype, "fallback", void 0);
__decorate([
    property({ type: String })
], Avatar.prototype, "size", void 0);
__decorate([
    state()
], Avatar.prototype, "imageLoaded", void 0);
__decorate([
    state()
], Avatar.prototype, "imageError", void 0);
if (!customElements.get('btu-avatar')) {
    customElements.define('btu-avatar', Avatar);
}
//# sourceMappingURL=Avatar.js.map