import { Component, Element, h, Prop, Watch } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkNotification {
  constructor() {
    /** Define el tipo de notificación a mostrar<br>
     * <strong>success: </strong>Color verde<br>
     * <strong>error: </strong>Color rojo<br>
     * <strong>alert: </strong>Color amarillo<br>
     * <strong>info: </strong>Color celeste
     */
    this.type = 'success';
    /** Define si se muestra la notificación en un contenedor */
    this.container = 'on';
    /** Define el ancho de la notificación */
    this.width = 'full';
    /** Define si la notificación se mantendrá oculta */
    this.show = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-notification', [
        this.type,
        { 'container-off': this.container == 'off' },
        { auto: this.width == 'auto' },
        { show: this.show },
        { fixed: this.fixed }
      ]);
    };
  }
  watchingShowProp(show) {
    if (show && this.timeout) {
      setTimeout(() => this.host.removeAttribute('show'), this.timeout);
    }
  }
  componentWillLoad() {
    if (this.show && this.timeout) {
      setTimeout(() => this.host.removeAttribute('show'), this.timeout);
    }
  }
  render() {
    return (h("div", { class: this.containerClass(), style: { width: this.width + 'px' } },
      h("i", { class: 'ibk-notification__icon icon-m-status-' + this.type }),
      h("span", { class: "ibk-notification__message", innerHTML: this.message })));
  }
  static get is() { return "ibk-notification"; }
  static get originalStyleUrls() { return {
    "$": ["notification.css"]
  }; }
  static get styleUrls() { return {
    "$": ["notification.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'alert' | 'error' | 'success' | 'info'",
        "resolved": "\"alert\" | \"error\" | \"info\" | \"success\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el tipo de notificaci\u00F3n a mostrar<br>\r\n<strong>success: </strong>Color verde<br>\r\n<strong>error: </strong>Color rojo<br>\r\n<strong>alert: </strong>Color amarillo<br>\r\n<strong>info: </strong>Color celeste"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'success'"
    },
    "container": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'on' | 'off'",
        "resolved": "\"off\" | \"on\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si se muestra la notificaci\u00F3n en un contenedor"
      },
      "attribute": "container",
      "reflect": false,
      "defaultValue": "'on'"
    },
    "width": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "'auto' | 'full' | number",
        "resolved": "\"auto\" | \"full\" | number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el ancho de la notificaci\u00F3n"
      },
      "attribute": "width",
      "reflect": false,
      "defaultValue": "'full'"
    },
    "message": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Mensaje a mostrar en la notificaci\u00F3n"
      },
      "attribute": "message",
      "reflect": false
    },
    "show": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si la notificaci\u00F3n se mantendr\u00E1 oculta"
      },
      "attribute": "show",
      "reflect": false,
      "defaultValue": "false"
    },
    "timeout": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el tiempo que la notificaci\u00F3n permanecer\u00E1 visible en pantalla.\r\nSi no se especifica, la notificaci\u00F3n permanecer\u00E1 visible hasta que se cambie la propiedad \"hide\" de forma manual.\r\nSe ingresar\u00E1 como valor el tiempo en milisegundos. Ejm: 2s = 2000"
      },
      "attribute": "timeout",
      "reflect": false
    },
    "fixed": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si la notificaci\u00F3n se mostrar\u00E1 fija en la parte superior de la pantalla"
      },
      "attribute": "fixed",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "show",
      "methodName": "watchingShowProp"
    }]; }
}
