import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement } from 'lit';
import { property, state } from 'lit/decorators.js';
import '@material/web/focus/md-focus-ring.js';
import '@material/web/ripple/ripple.js';
let UserAvatar = (() => {
    let _classSuper = LitElement;
    let _instanceExtraInitializers = [];
    let _userInitials_decorators;
    let _userInitials_initializers = [];
    let _userInitials_extraInitializers = [];
    let _userPicture_decorators;
    let _userPicture_initializers = [];
    let _userPicture_extraInitializers = [];
    let _set_user_decorators;
    return class UserAvatar extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _userInitials_decorators = [state()];
            _userPicture_decorators = [state()];
            _set_user_decorators = [property({ type: Object })];
            __esDecorate(this, null, _userInitials_decorators, { kind: "accessor", name: "userInitials", static: false, private: false, access: { has: obj => "userInitials" in obj, get: obj => obj.userInitials, set: (obj, value) => { obj.userInitials = value; } }, metadata: _metadata }, _userInitials_initializers, _userInitials_extraInitializers);
            __esDecorate(this, null, _userPicture_decorators, { kind: "accessor", name: "userPicture", static: false, private: false, access: { has: obj => "userPicture" in obj, get: obj => obj.userPicture, set: (obj, value) => { obj.userPicture = value; } }, metadata: _metadata }, _userPicture_initializers, _userPicture_extraInitializers);
            __esDecorate(this, null, _set_user_decorators, { kind: "setter", name: "user", static: false, private: false, access: { has: obj => "user" in obj, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        _user = __runInitializers(this, _instanceExtraInitializers);
        #userInitials_accessor_storage = __runInitializers(this, _userInitials_initializers, void 0);
        /**
         * Set with the user. The computed user initials.
         */
        get userInitials() { return this.#userInitials_accessor_storage; }
        set userInitials(value) { this.#userInitials_accessor_storage = value; }
        #userPicture_accessor_storage = (__runInitializers(this, _userInitials_extraInitializers), __runInitializers(this, _userPicture_initializers, void 0));
        /**
         * The URL to the user picture.
         */
        get userPicture() { return this.#userPicture_accessor_storage; }
        set userPicture(value) { this.#userPicture_accessor_storage = value; }
        get user() {
            return this._user;
        }
        /**
         * @attribute
         */
        set user(value) {
            const old = this._user;
            if (old === value) {
                return;
            }
            if (old && value && old.key === value.key) {
                return;
            }
            this._user = value;
            this.requestUpdate('user', old);
            this._processUser(value);
        }
        _processUser(user) {
            if (user) {
                this.userInitials = this._readUserInitials(user);
                this.userPicture = user.picture && user.picture.url;
            }
            else {
                this.userInitials = undefined;
                this.userPicture = undefined;
            }
        }
        _readUserInitials(user) {
            const { name } = user;
            if (!name) {
                return undefined;
            }
            const max = 2;
            const parts = name
                .split(/[\s-]/)
                .slice(0, max)
                .filter((i) => !!i)
                .map((i) => i[0]);
            return parts.join('');
        }
        _pictureError() {
            this.userPicture = undefined;
        }
        /**
         * @return Template result for an icon
         */
        render() {
            const { user, userPicture } = this;
            if (!user || user.key === 'default') {
                return html ``;
            }
            let content;
            if (userPicture) {
                content = this.pictureTemplate(userPicture);
            }
            else if (this.userInitials) {
                content = this.nameTemplate(this.userInitials);
            }
            else {
                content = this.nameTemplate('');
            }
            return html `
      <button id="button" class="icon-button">
        <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
        <md-ripple></md-ripple>
        <span role="presentation" class="icon">${content}</span>
        <span class="touch"></span>
      </button>
    `;
        }
        pictureTemplate(url) {
            return html `
      <img
        src="${url}"
        alt="${this.userInitials || 'Thumb'}"
        class="user-picture user-icon"
        @error="${this._pictureError}"
      />
    `;
        }
        /**
         * Renders a bubble with user initials
         * @param initials The user initials
         */
        nameTemplate(initials) {
            return html ` <span class="avatar-initials user-icon">${initials}</span> `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _userPicture_extraInitializers);
        }
    };
})();
export default UserAvatar;
//# sourceMappingURL=UserAvatar.js.map