import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzButton {
  constructor() {
    this.createRipple = (event) => {
      const button = this._button;
      if (!button || this.isDisabled || !this.enabled)
        return;
      const rect = button.getBoundingClientRect();
      let clientX, clientY;
      if (event instanceof MouseEvent) {
        clientX = event.clientX;
        clientY = event.clientY;
      }
      else {
        clientX = event.touches[0].clientX;
        clientY = event.touches[0].clientY;
      }
      const x = clientX - rect.left;
      const y = clientY - rect.top;
      const newRipple = { x, y, id: Date.now() };
      this.ripples = [...this.ripples, newRipple];
      this.isPressed = true;
      setTimeout(() => {
        this.isPressed = false;
      }, 150);
      setTimeout(() => {
        this.ripples = this.ripples.filter(ripple => ripple.id !== newRipple.id);
      }, 600);
    };
    this.ripples = [];
    this.isPressed = false;
    this.label = undefined;
    this.enabled = true;
    this.isDisabled = false;
    this.mode = "regular";
    this.image = undefined;
    this.iconName = undefined;
    this.size = "medium";
    this.variant = undefined;
    this.type = "button";
    this.leftIconName = undefined;
    this.rightIconName = undefined;
    this.suppressAnimation = false;
  }
  /**
   * Aplica o foco no botão.
   */
  async setFocus() {
    this._button.focus();
    this._button.classList.add("force-focus-visible");
  }
  /**
   * Remove o foco do botão.
   */
  async setBlur() {
    this._button.blur();
  }
  onMouseDown(event) {
    this.createRipple(event);
  }
  onTouchStart(event) {
    this.createRipple(event);
  }
  clickListener(evt) {
    const isDisabled = !this.enabled ||
      this.isDisabled === true ||
      this.isDisabled === "" ||
      this.isDisabled === "full";
    if (isDisabled) {
      evt.stopImmediatePropagation();
    }
  }
  removeForcedFocusVisible() {
    var _a;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.classList.remove('force-focus-visible');
  }
  connectedCallback() {
    var _a, _b;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
    (_b = this._button) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
  }
  componentDidLoad() {
    var _a;
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._button) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
    }
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.removeForcedFocusVisible.bind(this));
  }
  disconnectCallback() {
    var _a;
    (_a = this._button) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.removeForcedFocusVisible.bind(this));
  }
  getButtonSize(sizeParam = "medium") {
    const sizeList = ["x-small", "small", "medium", "large"];
    const sizeLowerCase = this.size && this.size.toLowerCase();
    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
  }
  getButtonSizeClass() {
    return this.getButtonSize() ? `btn-icon--${this.getButtonSize()}` : "";
  }
  getIconSize() {
    const iconSize = this.size === "x-small" ? "small" : this.size;
    return iconSize;
  }
  handleSlotChange(ev) {
    const slot = ev.target;
    const content = slot.assignedElements()[0];
    if (!!content) {
      if (this.mode == "link") {
        content.style.display = "inline";
      }
      else {
        content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
      }
    }
  }
  renderRipples() {
    return this.ripples.map((ripple) => (h("span", { key: ripple.id, class: "ripple", style: {
        left: `${ripple.x - 10}px`,
        top: `${ripple.y - 10}px`,
      } })));
  }
  render() {
    const renderButton = () => {
      if (this.mode == "icon") {
        return (h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()));
      }
      if (this.mode == "label-icon") {
        return (h("div", { class: `label-icon  ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}` }, h("button", { class: `btn-icon ${this.getButtonSizeClass()} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() }), !this.suppressAnimation && this.renderRipples()), h("label", { title: this.label }, this.label)));
      }
      if (this.mode == "link") {
        return (h("a", { class: `${this.getIconSize()} ${(this.isDisabled === "full" || this.isDisabled === "" || this.isDisabled === true || !this.enabled) ? "disabled" : ""}`, tabIndex: 0, ref: (el) => this._button = el }, this.leftIconName
          ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
          : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
          ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
          : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
      }
      return (h("button", { class: `${this.getButtonSize("")} ${this.isPressed ? 'pressed' : ''}`, type: this.type, disabled: this.isDisabled === "full" || !this.enabled, "aria-disabled": this.isDisabled && this.isDisabled === true, ref: (el) => this._button = el }, this.leftIconName
        ? h("ez-icon", { class: "leftIcon", iconName: this.leftIconName, size: this.getIconSize() })
        : h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, this.rightIconName
        ? h("ez-icon", { class: "rightIcon", iconName: this.rightIconName, size: this.getIconSize() })
        : h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), !this.suppressAnimation && this.renderRipples()));
    };
    return (h(Host, { class: `${this.variant ? `ez-button--${this.variant}` : ""}` }, renderButton()));
  }
  static get is() { return "ez-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-button.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-button.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 bot\u00E3o."
        },
        "attribute": "label",
        "reflect": true
      },
      "enabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "deprecated",
              "text": "Use `isDisabled` prop instead."
            }],
          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
        },
        "attribute": "enabled",
        "reflect": true,
        "defaultValue": "true"
      },
      "isDisabled": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "boolean | \"full\" | \"\"",
          "resolved": "\"\" | \"full\" | boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Se verdadeiro o clique no bot\u00E3o fica desabilitado mas a navega\u00E7\u00E3o continua funcional.\nSe full, o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
        },
        "attribute": "is-disabled",
        "reflect": true,
        "defaultValue": "false"
      },
      "mode": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"regular\" | \"icon\" | \"link\" | \"label-icon\"",
          "resolved": "\"icon\" | \"label-icon\" | \"link\" | \"regular\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o modo de uso do bot\u00E3o."
        },
        "attribute": "mode",
        "reflect": true,
        "defaultValue": "\"regular\""
      },
      "image": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o caminho usado nos modos `icon` e `label-icon` para imagens n\u00E3o contempladas na biblioteca de \u00EDcones."
        },
        "attribute": "image",
        "reflect": true
      },
      "iconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
        },
        "attribute": "icon-name",
        "reflect": true
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\"",
          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do ez-button."
        },
        "attribute": "size",
        "reflect": true,
        "defaultValue": "\"medium\""
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"primary\" | \"secondary\" | \"tertiary\"",
          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a variante do ez-button."
        },
        "attribute": "variant",
        "reflect": false
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o tipo do bot\u00E3o.\nPode ser `button`, `submit` ou `reset`."
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "\"button\""
      },
      "leftIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone esquerdo do ez-button.\nTem prioridade sobre o slot `leftIcon`."
        },
        "attribute": "left-icon-name",
        "reflect": false
      },
      "rightIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone direto do ez-button.\nTem prioridade sobre o slot `rightIcon`."
        },
        "attribute": "right-icon-name",
        "reflect": false
      },
      "suppressAnimation": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Se verdadeiro, desabilita a anima\u00E7\u00E3o de ripple."
        },
        "attribute": "suppress-animation",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "ripples": {},
      "isPressed": {}
    };
  }
  static get methods() {
    return {
      "setFocus": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no bot\u00E3o.",
          "tags": []
        }
      },
      "setBlur": {
        "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"; }
  static get listeners() {
    return [{
        "name": "mousedown",
        "method": "onMouseDown",
        "target": undefined,
        "capture": false,
        "passive": true
      }, {
        "name": "touchstart",
        "method": "onTouchStart",
        "target": undefined,
        "capture": false,
        "passive": true
      }, {
        "name": "click",
        "method": "clickListener",
        "target": undefined,
        "capture": true,
        "passive": false
      }];
  }
}
