import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
import Colors from "../../constants/colors";
export class XAvatar {
    constructor() {
        this.image = undefined;
        this.letters = '?';
        this.size = '3rem';
        this.rounded = false;
        this.imageLoaded = false;
        this.imageError = false;
    }
    /**
     * Get a number index by letter
     *
     * @returns
     */
    getLetterNumber() {
        const text = (this.letters || 'A').toUpperCase();
        const size = (this.letters || 'A').length;
        let number = 0;
        for (let position = 0; position < size; position++) {
            number += (text.charCodeAt(position) - 64) * Math.pow(26, size - position - 1);
        }
        return number;
    }
    /**
     * Get the color relative to the letters
     *
     * @returns
     */
    getColorByLetters() {
        const list = Colors.filter(color => color != 'default');
        return list[this.getLetterNumber() % list.length];
    }
    /**
     * Callback on finished loaded image
     *
     * @param event
     */
    onLoadImage() {
        this.imageLoaded = true;
    }
    /**
     * Callback error on loaded image
     *
     * @param event
     */
    onErrorImage() {
        this.imageError = true;
    }
    /**
     * Render component
     */
    render() {
        var _a;
        return h(Host, { key: '13749c0fe85a85ade602cf9ffdcb8035299859d8', style: { fontSize: this.size } }, h("div", { key: '4e0dc54d79bdff6f5370e3871f258b40cd1b5d4d', class: cls(`avatar-${this.getColorByLetters()}`, {
                'avatar-only-letters': !this.image,
                'avatar-image-loaded': this.imageLoaded && !this.imageError,
                'avatar-rounded': this.rounded,
            }) }, ((_a = this.image) === null || _a === void 0 ? void 0 : _a.length) && h("img", { key: '15c3034995916c5f198d65e03f27aefab0accc2d', src: this.image, alt: this.letters, onLoad: () => this.onLoadImage(), onError: () => this.onErrorImage() }), h("span", { key: '516868657d91c6027ccfc7a28a104ea76b8b8857' }, this.letters.substring(0, 2))), h("slot", { key: 'ceedc33f9292d2bde5553b9bad818cd05637ebd2' }));
    }
    static get is() { return "x-avatar"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "image": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element image path"
                },
                "attribute": "image",
                "reflect": false
            },
            "letters": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Initial letters or name"
                },
                "attribute": "letters",
                "reflect": false,
                "defaultValue": "'?'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element font size"
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'3rem'"
            },
            "rounded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element rounded style"
                },
                "attribute": "rounded",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "imageLoaded": {},
            "imageError": {}
        };
    }
}
