import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./avatar.service";
export class AvatarComponent {
    constructor(el, renderer, avatarService) {
        this.el = el;
        this.renderer = renderer;
        this.avatarService = avatarService;
        /** Color map base on the first let of the label */
        this.colors = {
            abcde01: 'red',
            fghij23: 'orange',
            klmn15: 'yellow',
            opqr67: 'green',
            stuv8: 'blue',
            wxyz9: 'purple'
        };
        /** Label is defaulted to HI in the rare case the user does not have a first name, last name, email or username */
        this.label = 'HI';
        /** Track the current CSS class so we can remove it if the user changes before setting the next one */
        this.currentCSSClass = '';
    }
    ngOnChanges(changes) {
        if (!changes.user.firstChange && !this.user) {
            console.error(`AvatarComponent expected a value for the [user] input but got ${this.user} instead.`);
        }
        this.updateLabel();
        this.updateColor();
    }
    /**
     * Update the Avatar label
     *
     */
    updateLabel() {
        if (this.user) {
            this.label = this.avatarService.getAvatarLabels(this.user).abbreviation;
        }
    }
    /**
     * Sets the color of the Avatar based on the first letter of the label. If the label is HI or is not
     * a letter, default to gray.
     */
    updateColor() {
        if (this.currentCSSClass) {
            this.renderer.removeClass(this.el.nativeElement, this.currentCSSClass);
        }
        let color = 'gray';
        if (this.label !== 'HI' && this.label) {
            for (let key in this.colors) {
                if (key.includes(this.label[0].toLowerCase())) {
                    color = this.colors[key];
                }
            }
        }
        this.currentCSSClass = `avatar-${color}`;
        this.renderer.addClass(this.el.nativeElement, this.currentCSSClass);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, selector: "ec-avatar", inputs: { user: "user" }, usesOnChanges: true, ngImport: i0, template: '{{label}}', isInline: true, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ec-avatar', template: '{{label}}', styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.AvatarService }], propDecorators: { user: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 