import { ElementIDUtils } from '@sankhyalabs/core';
import { h } from "@stencil/core";
export class EzChip {
  constructor() {
    this.label = undefined;
    this.enabled = true;
    this.removePosition = undefined;
    this.mode = undefined;
    this.value = false;
    this.showNativeTooltip = false;
    this.disableAutoUpdateValue = false;
    this.maxWidth = undefined;
    this.size = 'default';
    this.iconNameLeft = undefined;
    this.iconNameRight = undefined;
    this.type = 'primary';
    this.tabIndex = 0;
    this.removeWithKeyboard = false;
    this._isOverflowing = false;
  }
  //---------------------------------------------
  // Public methods
  //---------------------------------------------
  /**
   * Aplica o foco no ez-chip.
   */
  async setFocus() {
    this._containerElem.focus();
  }
  /**
   * Remove o foco do ez-chip.
   */
  async setBlur() {
    this._containerElem.blur();
  }
  handleValueChange() {
    this.swichState();
    this.valueChange.emit(this.value);
  }
  handleClick() {
    if (!this.enabled) {
      return;
    }
    if (this.mode === "action") {
      return this.actionClick.emit();
    }
    if (!this.disableAutoUpdateValue) {
      return this.handleValueChange();
    }
  }
  handleClickRemoveButton(event) {
    if (!this.enabled) {
      return;
    }
    event.stopPropagation();
    this.removeChip.emit();
  }
  handleIconClick(event, icon) {
    if (!this.enabled) {
      return;
    }
    event.stopPropagation();
    this.iconClick.emit({ icon });
  }
  swichState() {
    if (this.enabled) {
      this.value = !this.value;
    }
  }
  checkIsOverflowing() {
    if (this._labelElem) {
      this._isOverflowing = this._labelElem.offsetWidth < this._labelElem.scrollWidth;
      return;
    }
    this._isOverflowing = false;
  }
  handleDeleteKey() {
    if (this.removeWithKeyboard) {
      this.removeChip.emit();
      return;
    }
    if (this.mode === "action") {
      this.actionClick.emit();
    }
    else {
      this.swichState();
      this.valueChange.emit(this.value);
    }
  }
  handleKeyDown(event) {
    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
      event.preventDefault();
      this.handleDeleteKey();
    }
  }
  //---------------------------------------------
  // Lifecycle web component
  //---------------------------------------------
  componentDidLoad() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element, 'ezChip');
    }
    if (this._containerElem) {
      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
    }
    this.checkIsOverflowing();
  }
  render() {
    let colorState = 'default';
    if (!this.enabled) {
      colorState = 'disabled';
    }
    else if (this.value && this.mode !== "action") {
      colorState = 'active';
    }
    return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
        "label__container--row-reverse": this.removePosition === "left",
        "label__container": true,
      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: this.handleClick.bind(this), tabIndex: this.tabIndex, style: {
        maxWidth: this.maxWidth
      }, onKeyDown: this.handleKeyDown.bind(this) }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
        "label__text--disabled": !this.enabled,
        "label__text": true,
      } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));
  }
  static get is() { return "ez-chip"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-chip.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-chip.css"]
    };
  }
  static get properties() {
    return {
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como t\u00EDtulo do ez-chip."
        },
        "attribute": "label",
        "reflect": true
      },
      "enabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o ez-chip."
        },
        "attribute": "enabled",
        "reflect": true,
        "defaultValue": "true"
      },
      "removePosition": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"left\" | \"right\" | undefined",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determina o posicionamento do bot\u00E3o de remover (n\u00E3o dispon\u00EDvel no modo `action`). \nSe n\u00E3o informado, n\u00E3o exibe o bot\u00E3o."
        },
        "attribute": "remove-position",
        "reflect": true
      },
      "mode": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"label\" | \"action\"",
          "resolved": "\"action\" | \"label\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o modo de uso do ez-chip."
        },
        "attribute": "mode",
        "reflect": true
      },
      "value": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o valor do ez-chip."
        },
        "attribute": "value",
        "reflect": true,
        "defaultValue": "false"
      },
      "showNativeTooltip": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento."
        },
        "attribute": "show-native-tooltip",
        "reflect": false,
        "defaultValue": "false"
      },
      "disableAutoUpdateValue": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Desabilita a altera\u00E7\u00E3o da propriedade value ao clicar."
        },
        "attribute": "disable-auto-update-value",
        "reflect": false,
        "defaultValue": "false"
      },
      "maxWidth": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho m\u00E1ximo do chip."
        },
        "attribute": "max-width",
        "reflect": false
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'default' | 'medium' | 'large'",
          "resolved": "\"default\" | \"large\" | \"medium\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do chip."
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "'default'"
      },
      "iconNameLeft": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o icone esquerdo."
        },
        "attribute": "icon-name-left",
        "reflect": false
      },
      "iconNameRight": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o icone direito."
        },
        "attribute": "icon-name-right",
        "reflect": false
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "EzChipType",
          "resolved": "\"error\" | \"error-light\" | \"primary\" | \"secondary\" | \"success\" | \"success-light\" | \"warning\" | \"warning-light\"",
          "references": {
            "EzChipType": {
              "location": "local"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tipo de estiliza\u00E7\u00E3o do chip."
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "'primary'"
      },
      "tabIndex": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tabindex do chip.\nPor padr\u00E3o \u00E9 0, permitindo que o chip seja foc\u00E1vel."
        },
        "attribute": "tab-index",
        "reflect": false,
        "defaultValue": "0"
      },
      "removeWithKeyboard": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o chip deve ser removido ao pressionar a tecla Enter quando focado."
        },
        "attribute": "remove-with-keyboard",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "_isOverflowing": {}
    };
  }
  static get events() {
    return [{
        "method": "valueChange",
        "name": "valueChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do ez-chip."
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }, {
        "method": "removeChip",
        "name": "removeChip",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o bot\u00E3o de remo\u00E7\u00E3o \u00E9 acionado."
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }, {
        "method": "actionClick",
        "name": "actionClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido no modo \"action\" quando o usu\u00E1rio clica no ez-chip."
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }, {
        "method": "iconClick",
        "name": "iconClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o icone \u00E9 acionado."
        },
        "complexType": {
          "original": "{ icon: \"left\" | \"right\" }",
          "resolved": "{ icon: \"left\" | \"right\"; }",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "setFocus": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no ez-chip.",
          "tags": []
        }
      },
      "setBlur": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Remove o foco do ez-chip.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
}
