/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, state, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-avatar.css';
import NileElement from '../internal/nile-element';
/**
 * Nile icon component.
 *
 * @tag nile-avatar
 *
 */
let NileAvatar = class NileAvatar extends NileElement {
    constructor() {
        super(...arguments);
        /** Gives the url to the Avatar */
        this.src = '';
        /** Gives the icon to the Avatar */
        this.variant = 'text';
        /** Gives the icon to the Avatar */
        this.icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';
        /** Gives the default Image Letters to the Avatar */
        this.name = '';
        /** Gives the default bg color  to the Avatar */
        this.bgColor = '';
        /** Gives the default text color  to the Avatar */
        this.textColor = '';
        /** Gives the default border color  to the Avatar */
        this.borderColor = '';
        /** Size of the Avatar */
        this.size = 'md';
        /** Gives a border radius of 50% to the Avatar */
        this.isRounded = true;
        this.imageError = false;
        /* #endregion */
    }
    /**
     * The styles for Avatar
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    generateInitials() {
        if (!this.name) {
            return '';
        }
        const nameParts = this.name
            .split(' ')
            .filter(part => part.length > 0)
            .map(part => part.charAt(0).toUpperCase())
            .slice(0, 2);
        return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];
    }
    generateVariantCode(initials) {
        const char1 = initials.charCodeAt(0);
        const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);
        const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);
        return multifactor % 5;
    }
    getDefaultIconSize() {
        switch (this.size) {
            case 'xs':
                return '6';
            case 'sm':
                return '10';
            case 'md':
                return '16';
            case 'lg':
                return '20';
            case 'xl':
                return '24';
            case '2xl':
                return '28';
            default:
                return '16';
        }
    }
    render() {
        if ('image' == this.variant && !this.imageError) {
            return this.getImageContent();
        }
        else {
            const defaultInitials = this.generateInitials();
            if ('text' == this.variant && defaultInitials) {
                return this.getContentWrapped(html `${defaultInitials}`, defaultInitials);
            }
            else {
                return this.getContentWrapped(this.getIconContent(), defaultInitials);
            }
        }
    }
    getContentWrapped(content, defaultInitials) {
        const variant__code = this.generateVariantCode(defaultInitials);
        return html `
    <div
      class=${classMap({
            text__avatar: true,
            avatar__xs: this.size === 'xs',
            avatar__small: this.size === 'sm',
            avatar__medium: this.size === 'md',
            avatar__large: this.size === 'lg',
            avatar__extralarge: this.size === 'xl',
            avatar__2xl: this.size === '2xl',
            avatar__rounded: this.isRounded,
            variant__orange: variant__code === 0 && !this.bgColor,
            variant__pink: variant__code === 1 && !this.bgColor,
            variant__blue: variant__code === 2 && !this.bgColor,
            variant__light_blue: variant__code === 3 && !this.bgColor,
            variant__green: variant__code === 4 && !this.bgColor,
        })}
      aria-hidden="true"
      part="avatar__content"
      style="
        background-color: ${this.bgColor};
        color:${this.textColor ? this.textColor : "var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
    >
      ${content}
    </div>`;
    }
    getIconContent() {
        return html `
    <nile-icon
      name="${this.icon}"
      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
      color="${this.textColor ? this.textColor : 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
      size="${this.getDefaultIconSize()}"
    ></nile-icon>`;
    }
    getImageContent() {
        return html ` 
    <img
      src="${this.src}"
      class="avatar"
      alt="${this.name || 'Avatar'}"
      class=${classMap({
            avatar: true,
            avatar__xs: this.size === 'xs',
            avatar__small: this.size === 'sm',
            avatar__medium: this.size === 'md',
            avatar__large: this.size === 'lg',
            avatar__extralarge: this.size === 'xl',
            avatar__2xl: this.size === '2xl',
            avatar__rounded: this.isRounded,
        })}
      part="avatar__image"
      style="	background-image: url(${this.src}), linear-gradient(lightgray, lightgray);"
      @error="${() => this.imageError = true}"
      @load="${() => this.imageError = false}"
    />`;
    }
};
__decorate([
    property({ type: String, reflect: true })
], NileAvatar.prototype, "src", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileAvatar.prototype, "variant", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileAvatar.prototype, "icon", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileAvatar.prototype, "name", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: 'bg-color' })
], NileAvatar.prototype, "bgColor", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: 'text-color' })
], NileAvatar.prototype, "textColor", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: 'border-color' })
], NileAvatar.prototype, "borderColor", void 0);
__decorate([
    property({ reflect: true })
], NileAvatar.prototype, "size", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileAvatar.prototype, "isRounded", void 0);
__decorate([
    state()
], NileAvatar.prototype, "imageError", void 0);
NileAvatar = __decorate([
    customElement('nile-avatar')
], NileAvatar);
export { NileAvatar };
export default NileAvatar;
//# sourceMappingURL=nile-avatar.js.map