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 { UmbUserKind } from '../../utils/index.js';
import { css, html, customElement, property, ifDefined, state, classMap, query, } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
let UmbUserAvatarElement = class UmbUserAvatarElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.kind = UmbUserKind.DEFAULT;
        this.#imgUrls = [];
        this._imgSrcSizes = [];
        this._imgSrc = '';
        this._hasImgUrls = false;
    }
    get imgUrls() {
        return this.#imgUrls;
    }
    set imgUrls(value) {
        this.#imgUrls = value;
        this._hasImgUrls = value.length > 0;
        this.#setImgSrcSizes();
    }
    #imgUrls;
    #setImgSrcSizes() {
        if (this.#imgUrls.length === 0) {
            this._imgSrcSizes = [];
            this._imgSrc = '';
            return;
        }
        this._imgSrcSizes = [
            {
                w: 30,
                url: this.#imgUrls[0],
            },
            {
                w: 60,
                url: this.#imgUrls[1],
            },
            {
                w: 90,
                url: this.#imgUrls[2],
            },
            {
                w: 150,
                url: this.#imgUrls[3],
            },
            {
                w: 300,
                url: this.#imgUrls[4],
            },
        ];
        this.#setImgSrc();
    }
    firstUpdated() {
        this.#setImgSrc();
    }
    async #setImgSrc() {
        if (!this._hasImgUrls)
            return;
        if (!this.avatarElement)
            return;
        setTimeout(() => {
            // TODO: look into img sizes="auto" to let the browser handle the correct image size based on the element size
            const elementSize = this.avatarElement.getBoundingClientRect();
            const elementWidth = elementSize.width;
            const matchingSizes = this._imgSrcSizes.filter((size) => {
                // we multiply the element width to make sure we have a good quality image
                return elementWidth * 1.5 <= size.w;
            });
            // We use the smallest image that is larger than the element width
            this._imgSrc = matchingSizes[0]?.url;
        }, 0);
    }
    render() {
        const classes = {
            default: this.kind === UmbUserKind.API,
            api: this.kind === UmbUserKind.API,
            'has-image': this._hasImgUrls,
        };
        return html `<uui-avatar
			.name=${this.name || 'Unknown'}
			img-src=${ifDefined(this._imgSrc ? this._imgSrc : undefined)}
			class=${classMap(classes)}></uui-avatar>`;
    }
    static { this.styles = [
        css `
			uui-avatar {
				background-color: transparent;
				color: inherit;
				box-shadow: 0 0 0 1.5px var(--uui-color-border);
			}

			uui-avatar.has-image {
				border-color: transparent;
			}

			uui-avatar.api {
				border-radius: 9%;
			}
		`,
    ]; }
};
__decorate([
    property({ type: String })
], UmbUserAvatarElement.prototype, "name", void 0);
__decorate([
    property({ type: String })
], UmbUserAvatarElement.prototype, "kind", void 0);
__decorate([
    property({ type: Array, attribute: false })
], UmbUserAvatarElement.prototype, "imgUrls", null);
__decorate([
    state()
], UmbUserAvatarElement.prototype, "_imgSrcSizes", void 0);
__decorate([
    state()
], UmbUserAvatarElement.prototype, "_imgSrc", void 0);
__decorate([
    state()
], UmbUserAvatarElement.prototype, "_hasImgUrls", void 0);
__decorate([
    query('uui-avatar')
], UmbUserAvatarElement.prototype, "avatarElement", void 0);
UmbUserAvatarElement = __decorate([
    customElement('umb-user-avatar')
], UmbUserAvatarElement);
export { UmbUserAvatarElement };
