import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement, svg } 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 _userInitials_decorators;
    let _userInitials_initializers = [];
    let _userInitials_extraInitializers = [];
    let _userPicture_decorators;
    let _userPicture_initializers = [];
    let _userPicture_extraInitializers = [];
    let _user_decorators;
    let _user_initializers = [];
    let _user_extraInitializers = [];
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    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()];
            _user_decorators = [property({ type: Object })];
            _type_decorators = [property({ type: String })];
            __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, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_extraInitializers);
            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #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; }
        #user_accessor_storage = (__runInitializers(this, _userPicture_extraInitializers), __runInitializers(this, _user_initializers, void 0));
        /**
         * The user object to display the avatar for.
         */
        get user() { return this.#user_accessor_storage; }
        set user(value) { this.#user_accessor_storage = value; }
        #type_accessor_storage = (__runInitializers(this, _user_extraInitializers), __runInitializers(this, _type_initializers, 'button'));
        /**
         * The type of avatar to render, either 'button' or 'icon'.
         * @attribute
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        willUpdate(cp) {
            if (cp.has('user')) {
                this.handleUserChange(this.user);
            }
            super.willUpdate(cp);
        }
        /**
         * Handles changes to the user property.
         * @param user The user object
         */
        handleUserChange(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('');
        }
        handlePictureError() {
            this.userPicture = undefined;
        }
        /**
         * @return Template result for an icon
         */
        render() {
            const { userPicture } = this;
            let content;
            if (userPicture) {
                content = this.pictureTemplate(userPicture);
            }
            else if (this.userInitials) {
                content = this.nameTemplate(this.userInitials);
            }
            else {
                content = this.renderDefaultAvatar();
            }
            if (this.type === 'icon') {
                return this.renderIcon(content);
            }
            return this.renderButton(content);
        }
        renderButton(content) {
            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>
    `;
        }
        renderIcon(content) {
            return html `<span role="presentation" class="icon">${content}</span>`;
        }
        pictureTemplate(url) {
            return html `
      <img
        src="${url}"
        alt="${this.userInitials || 'Thumb'}"
        class="user-picture user-icon"
        @error="${this.handlePictureError}"
      />
    `;
        }
        /**
         * Renders a bubble with user initials
         * @param initials The user initials
         */
        nameTemplate(initials) {
            return html ` <span class="avatar-initials user-icon">${initials}</span> `;
        }
        renderDefaultAvatar() {
            return html `<span class="avatar-default icon"> ${this.defaultIcon()} </span>`;
        }
        defaultIcon() {
            return svg `
    <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
      <rect width="120" height="120" rx="60" class="avatar-background" />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z"
        class="avatar-lines"
      />
      <path
        d="M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z"
        class="avatar-lines"
      />
    </svg>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _type_extraInitializers);
        }
    };
})();
export default UserAvatar;
//# sourceMappingURL=UserAvatar.js.map