import { h } from '@stencil/core';
import initI18n from '../../utils/i18n';
export class EzAvatar {
  constructor() {
    this.DECIMAL_PARSE_BASE = 10;
    this.FONT_SIZE_BASE_CALC = 0.375;
    this.DEFAULT_ICON_NAME = "account-outline";
    this.name = undefined;
    this.imageSrc = undefined;
    this.iconName = undefined;
    this.size = '100';
    this.shape = 'circle';
    this.isInteractive = false;
  }
  /** Obtém a inicial do nome do usuário. */
  getInitial() {
    var _a;
    return ((_a = this.name) === null || _a === void 0 ? void 0 : _a.trim()) ? this.name.charAt(0).toUpperCase() : '';
  }
  calcFontSize() {
    const sizeNumber = parseInt(this.size, this.DECIMAL_PARSE_BASE);
    return this.FONT_SIZE_BASE_CALC * sizeNumber;
  }
  getClass() {
    return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
  }
  renderAvatarContent() {
    var _a;
    if (this.imageSrc) {
      return h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
    }
    if (this.name) {
      return h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
    }
    return h("ez-icon", { class: "avatar-icon", iconName: (_a = this.iconName) !== null && _a !== void 0 ? _a : this.DEFAULT_ICON_NAME, fontSize: this.calcFontSize() });
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  render() {
    if (this.isInteractive) {
      return (h("button", { "aria-label": this.i18n("app.profile"), class: this.getClass() }, this.renderAvatarContent()));
    }
    return (h("figure", { class: this.getClass() }, this.renderAvatarContent()));
  }
  static get is() { return "ez-avatar"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-avatar.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-avatar.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do usu\u00E1rio para exibi\u00E7\u00E3o da inicial."
        },
        "attribute": "name",
        "reflect": true
      },
      "imageSrc": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "URL da imagem do Avatar."
        },
        "attribute": "image-src",
        "reflect": true
      },
      "iconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do \u00EDcone que deve ser exibido no avatar."
        },
        "attribute": "icon-name",
        "reflect": true
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'320' | '300' | '280' | '260' | '240' | '220' | '200' | '180' | '160' | '140' | '120' | '100' | '80' | '60'",
          "resolved": "\"100\" | \"120\" | \"140\" | \"160\" | \"180\" | \"200\" | \"220\" | \"240\" | \"260\" | \"280\" | \"300\" | \"320\" | \"60\" | \"80\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Tamanho do Avatar (valores permitidos):\n'320x320', '300x300', '280x280', '260x260', '240x240', '220x220', '200x200',\n'180x180', '160x160', '140x140', '120x120', '100x100', '80x80', '60x60'."
        },
        "attribute": "size",
        "reflect": true,
        "defaultValue": "'100'"
      },
      "shape": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'circle' | 'square'",
          "resolved": "\"circle\" | \"square\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o formato do Avatar: 'circle' ou 'square'."
        },
        "attribute": "shape",
        "reflect": true,
        "defaultValue": "'circle'"
      },
      "isInteractive": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Se true, o Avatar ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico."
        },
        "attribute": "is-interactive",
        "reflect": true,
        "defaultValue": "false"
      }
    };
  }
}
