import { Component, Event, h, Prop, Watch, Element } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkButton {
  constructor() {
    /**
     * <strong>primary:</strong> Fondo de color con texto blanco <br>
     * <strong>secondary:</strong> Fondo transparente con borde y texto verde <br>
     * <strong>tertiary:</strong> Texto verde sin fondo ni borde
     */
    this.appearance = 'primary';
    /** Define si el botón será de color verde o azul. Por defecto será verde. */
    this.color = 'green';
    /** Alto del botón, 40px, 48px y 56px respectivamente en desktop y 32px, 44px, 48px en mobile */
    this.size = 'medium';
    /** Define el tipo del botón, se usarán los tipos nativos */
    this.type = 'button';
    /** Determina si el botón se encuentra sobre un fondo oscuro */
    this.negative = false;
    /** Cuando está en true, se mostrará un icono con una animación de carga. */
    this.loading = false;
    /** Determina si usará el 100% del espacio disponible */
    this.full = false;
    /** Determina si el botón irá al centro de la pantalla */
    this.center = false;
    /** Determina si le botón se encuentra deshabilitado */
    this.disable = false;
    /** Determina si el enlace se abre en una nueva ventana o en la misma */
    this.hrefTarget = '_self';
  }
  componentDidLoad() {
    setTimeout(() => {
      this._buttonElement = this.host.querySelector('.ibk-button');
      this._sizeButton = this._buttonElement.getBoundingClientRect().width;
      if (this.text != undefined && this.icon != undefined && this.iconPosition == undefined) {
        this.iconPosition = 'right';
      }
      if (this.full || this.center) {
        this.host.style.width = "100%";
      }
    }, 100);
  }
  onLoadingChange(loading) {
    if (loading && loading === true && !this.href) {
      this._buttonElement.style.width = `${this._sizeButton}px`;
    }
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-button', [
      this.appearance,
      this.size,
      this.color,
      this.iconPosition && `icon-${this.iconPosition}`,
      { full: this.full },
      { disable: this.disable },
      { negative: this.negative },
      { center: this.center }
    ]);
  }
  render() {
    if (this.href) {
      return (h("a", { class: this.containerClass(), href: this.href, onClick: this.onclick.emit, target: this.hrefTarget },
        h("span", { class: "ibk-button__text" }, this.text)));
    }
    else {
      return (h("button", { class: this.containerClass(), type: this.type, onClick: this.onclick.emit }, !this.loading ?
        h("span", { class: "ibk-button__text" },
          this.icon && this.iconPosition == 'left' && h("i", { class: 'ibk-button__icon ' + this.icon }),
          h("span", { innerHTML: this.text }),
          this.icon && this.iconPosition == 'right' && h("i", { class: 'ibk-button__icon ' + this.icon }))
        :
          h("span", { class: "ibk-button__loader" })));
    }
  }
  static get is() { return "ibk-button"; }
  static get originalStyleUrls() { return {
    "$": ["button.css"]
  }; }
  static get styleUrls() { return {
    "$": ["button.css"]
  }; }
  static get properties() { return {
    "appearance": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'primary' | 'secondary' | 'tertiary'",
        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "<strong>primary:</strong> Fondo de color con texto blanco <br>\r\n<strong>secondary:</strong> Fondo transparente con borde y texto verde <br>\r\n<strong>tertiary:</strong> Texto verde sin fondo ni borde"
      },
      "attribute": "appearance",
      "reflect": false,
      "defaultValue": "'primary'"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'green' | 'blue'",
        "resolved": "\"blue\" | \"green\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si el bot\u00F3n ser\u00E1 de color verde o azul. Por defecto ser\u00E1 verde."
      },
      "attribute": "color",
      "reflect": false,
      "defaultValue": "'green'"
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Contenido del bot\u00F3n"
      },
      "attribute": "text",
      "reflect": false
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large'",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Alto del bot\u00F3n, 40px, 48px y 56px respectivamente en desktop y 32px, 44px, 48px en mobile"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'button' | 'submit' | 'reset'",
        "resolved": "\"button\" | \"reset\" | \"submit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el tipo del bot\u00F3n, se usar\u00E1n los tipos nativos"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'button'"
    },
    "negative": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el bot\u00F3n se encuentra sobre un fondo oscuro"
      },
      "attribute": "negative",
      "reflect": false,
      "defaultValue": "false"
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Cuando est\u00E1 en true, se mostrar\u00E1 un icono con una animaci\u00F3n de carga."
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "false"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define un \u00EDcono que se mostrar\u00E1 solo o acompa\u00F1ar\u00E1 al texto"
      },
      "attribute": "icon",
      "reflect": false
    },
    "iconPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'right' | 'left'",
        "resolved": "\"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la posici\u00F3n del icono en el caso de estar acompa\u00F1ado de un texto"
      },
      "attribute": "icon-position",
      "reflect": false
    },
    "full": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si usar\u00E1 el 100% del espacio disponible"
      },
      "attribute": "full",
      "reflect": false,
      "defaultValue": "false"
    },
    "center": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el bot\u00F3n ir\u00E1 al centro de la pantalla"
      },
      "attribute": "center",
      "reflect": false,
      "defaultValue": "false"
    },
    "disable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si le bot\u00F3n se encuentra deshabilitado"
      },
      "attribute": "disable",
      "reflect": false,
      "defaultValue": "false"
    },
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Crea un enlace a la url especificada"
      },
      "attribute": "href",
      "reflect": false
    },
    "hrefTarget": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'_self' | '_blank' | '_parent' | '_top'",
        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el enlace se abre en una nueva ventana o en la misma"
      },
      "attribute": "href-target",
      "reflect": false,
      "defaultValue": "'_self'"
    }
  }; }
  static get events() { return [{
      "method": "onclick",
      "name": "onclick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite el evento click"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "loading",
      "methodName": "onLoadingChange"
    }]; }
}
