import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzTileMedium {
  constructor() {
    this.color = "default";
    this.iconName = undefined;
    this.iconColor = undefined;
    this.smallTitleText = undefined;
    this.smallTitleMaximumLines = undefined;
    this.titleText = undefined;
    this.titleMaximumLines = undefined;
    this.descriptionText = undefined;
    this.descriptionMaximumLines = undefined;
    this.height = undefined;
    this.width = undefined;
    this.avatarProps = undefined;
    this.buttonProps = undefined;
    this.tags = undefined;
  }
  /**
   * Aplica o foco no botão.
   */
  async setButtonFocus() {
    var _a;
    if (!this._button)
      return;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setFocus();
  }
  /**
   * Remove o foco do botão.
   */
  async setButtonBlur() {
    var _a;
    if (!this._button)
      return;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setBlur();
  }
  renderBadges() {
    if (!this.tags || this.tags.length === 0)
      return null;
    return this.tags.slice(0, 3).map((tag, index) => (h("ez-badge", { id: `tag-${tag.label}`, key: `tag-${index}`, label: tag.label, size: 'medium', style: { "--ez-badge--background-color": `var(${tag.color}, #008561)` } })));
  }
  setCustomCSSProperties() {
    var _a, _b;
    const colors = (_b = (_a = this.buttonProps) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : {};
    const { background, backgroundHover, backgroundActive, text, textHover, textActive } = colors;
    const customCSSVars = Object.assign({}, this.height && { '--ez-tile-medium--custom-height': `${this.height}` }, this.width && { '--ez-tile-medium--custom-width': `${this.width}` }, this.smallTitleMaximumLines && { '--ez-tile-medium--small-title--maximum-lines': `${this.smallTitleMaximumLines}` }, this.titleMaximumLines && { '--ez-tile-medium--title--maximum-lines': `${this.titleMaximumLines}` }, this.descriptionMaximumLines && { '--ez-tile-medium--description--maximum-lines': `${this.descriptionMaximumLines}` }, this.iconColor && { '--ez-tile-medium--custom-icon-color': `var(${this.iconColor})` }, (background && { "--ez-tile-medium_button--background-color": `var(${background}, #008561)` }), (backgroundHover && { "--ez-tile-medium_button--hover--background-color": `var(${backgroundHover}, #00684C)` }), (backgroundActive && { "--ez-tile-medium_button--active--background-color": `var(${backgroundActive}, #1A9171)` }), (text && { "--ez-tile-medium_button--color": `var(${text}, #ffffff)` }), (textHover && { "--ez-tile-medium_button--hover-color": `var(${textHover}, #ffffff)` }), (textActive && { "--ez-tile-medium_button--active-color": `var(${textActive}, #ffffff)` }));
    return customCSSVars;
  }
  componentDidLoad() {
    this.setCustomCSSProperties();
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._button) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._button, 'tile-medium_button', dataInfo);
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    return (h(Host, { style: this.setCustomCSSProperties() }, h("div", { class: `tile-medium_container ${this.color}` }, h("div", { class: `tile-medium_header` }, h("div", { class: "tile-medium_header-image" }, this.avatarProps
      ? h("ez-avatar", { size: "60", name: (_a = this.avatarProps) === null || _a === void 0 ? void 0 : _a.name, imageSrc: (_b = this.avatarProps) === null || _b === void 0 ? void 0 : _b.imageSrc, shape: ((_c = this.avatarProps) === null || _c === void 0 ? void 0 : _c.shape) || "square" })
      : this.iconName && h("ez-icon", { size: "x-large", class: "icon", iconName: this.iconName })), h("div", { class: `tag_group` }, this.renderBadges())), h("div", { class: "tile-medium_content" }, h("div", null, this.smallTitleText && h("span", { class: "small_title", title: this.smallTitleText }, this.smallTitleText), this.titleText && h("span", { class: "main_title", title: this.titleText }, this.titleText), this.descriptionText && h("span", { class: "description", title: this.descriptionText }, this.descriptionText)), this.buttonProps &&
      h("ez-button", { ref: el => this._button = el, class: "tile-medium_button", label: ((_d = this.buttonProps) === null || _d === void 0 ? void 0 : _d.label) || undefined, enabled: (_f = (_e = this.buttonProps) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : true, mode: (_g = this.buttonProps) === null || _g === void 0 ? void 0 : _g.mode, iconName: (_h = this.buttonProps) === null || _h === void 0 ? void 0 : _h.iconName, size: (_j = this.buttonProps) === null || _j === void 0 ? void 0 : _j.size, onClick: (_k = this.buttonProps) === null || _k === void 0 ? void 0 : _k.onClick })))));
  }
  static get is() { return "ez-tile-medium"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-tile-medium.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-tile-medium.css"]
    };
  }
  static get properties() {
    return {
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"default\" | \"green\" | \"gray\" | \"red\" | \"yellow\"",
          "resolved": "\"default\" | \"gray\" | \"green\" | \"red\" | \"yellow\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a cor tema do componente."
        },
        "attribute": "color",
        "reflect": false,
        "defaultValue": "\"default\""
      },
      "iconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
        },
        "attribute": "icon-name",
        "reflect": false
      },
      "iconColor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define uma cor customizada para o \u00EDcone, dentro da paleta de cores do Design System.\nExemplo: \"--color--yellow-600\""
        },
        "attribute": "icon-color",
        "reflect": false
      },
      "smallTitleText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como um t\u00EDtulo pequeno do componente."
        },
        "attribute": "small-title-text",
        "reflect": false
      },
      "smallTitleMaximumLines": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas no t\u00EDtulo pequeno.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
        },
        "attribute": "small-title-maximum-lines",
        "reflect": false
      },
      "titleText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como t\u00EDtulo do componente."
        },
        "attribute": "title-text",
        "reflect": false
      },
      "titleMaximumLines": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas no t\u00EDtulo.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
        },
        "attribute": "title-maximum-lines",
        "reflect": false
      },
      "descriptionText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como descri\u00E7\u00E3o do componente"
        },
        "attribute": "description-text",
        "reflect": false
      },
      "descriptionMaximumLines": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas na descri\u00E7\u00E3o.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 3 linhas."
        },
        "attribute": "description-maximum-lines",
        "reflect": false
      },
      "height": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a altura do componente, sobrescrevendo o padr\u00E3o de 257px."
        },
        "attribute": "height",
        "reflect": false
      },
      "width": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a largura do componente, sobrescrevendo o padr\u00E3o de 446px."
        },
        "attribute": "width",
        "reflect": false
      },
      "avatarProps": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{\n    name?: string;\n    imageSrc?: string;\n    shape?: 'circle' | 'square';\n  }",
          "resolved": "{ name?: string; imageSrc?: string; shape?: \"circle\" | \"square\"; }",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Propriedade utilizada para configurar o avatar, se definida substitui o \u00EDcone por um ez-avatar"
        }
      },
      "buttonProps": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{\n    label: string;\n    enabled?: boolean;\n    mode?: 'regular' | 'icon' | 'link' | 'label-icon';\n    iconName?: string;\n    size?: 'x-small' | 'small' | 'medium' | 'large';\n    onClick: () => void;\n    colors?:{\n      background?: string;\n      backgroundHover?: string;\n      backgroundActive?: string;\n      text?: string;\n      textHover?: string;\n      textActive?: string;\n    }\n  }",
          "resolved": "{ label: string; enabled?: boolean; mode?: \"link\" | \"regular\" | \"icon\" | \"label-icon\"; iconName?: string; size?: \"small\" | \"medium\" | \"large\" | \"x-small\"; onClick: () => void; colors?: { background?: string; backgroundHover?: string; backgroundActive?: string; text?: string; textHover?: string; textActive?: string; }; }",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define as props que ser\u00E3o passadas para o bot\u00E3o, caso o objeto seja passado, o bot\u00E3o ser\u00E1 renderizado."
        }
      },
      "tags": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{\n    label: string;\n    color?: string;\n  }[]",
          "resolved": "{ label: string; color?: string; }[]",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define as props que ser\u00E3o passadas para as tags, caso um objeto seja passado, a(s) tag(s) ser\u00E1 renderizada(s), se limitando a 3 tags."
        }
      }
    };
  }
  static get methods() {
    return {
      "setButtonFocus": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no bot\u00E3o.",
          "tags": []
        }
      },
      "setButtonBlur": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Remove o foco do bot\u00E3o.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
}
