import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { modifiersToClass } from "../../utils/utils";
export class IbkCheckbox {
  constructor() {
    /** Estado activo del checkbox */
    this.checked = false;
    /** Estado inactivo del checkbox */
    this.disabled = false;
    /** Error en el checkbox */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si el checkbox se encuentra deseleccionado, mostrará un mensaje de error */
    this.required = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = 'Este campo es requerido';
    /** Determina si el checkbox ocupa el 100% de la pantalla */
    this.full = false;
    /** Determina la posición del ícono */
    this.iconPosition = 'left';
    /** El checkbox se verá envuelto en una caja */
    this.outline = false;
    /** El checkbox estará agrupado en "ibk-checkbox-group" */
    this._grouped = false;
    /** Estado focus del checkbox */
    this._focus = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-checkbox', [
        this.iconPosition,
        { outline: this.outline },
        { checked: this.checked },
        { disabled: this.disabled },
        { error: this.error },
        { full: this.full },
        { focus: this._focus },
        { 'icon-only': !this.label }
      ]);
    };
  }
  componentWillLoad() {
    this.groupVerification();
  }
  /** Detecta cuando el estado del checkbox cambia */
  changeCheckbox() {
    if (this.checked) {
      this.host.removeAttribute('checked');
    }
    else {
      this.host.setAttribute('checked', '');
    }
    this.host.removeAttribute('error');
    this.onchecked.emit({
      checked: this.checked,
      value: this.value
    });
  }
  onPressEnter(e) {
    if (e.keyCode == 13) {
      if (this.checked) {
        this.host.removeAttribute('checked');
      }
      else {
        this.host.setAttribute('checked', '');
      }
    }
  }
  /** Verificar si el checkbox se encuentra agrupado */
  groupVerification() {
    const grouper = this.host.closest('ibk-checkbox-group');
    this._grouped = grouper != null ? true : false;
  }
  onRadioFocusIn() { this._focus = true; }
  onRadioFocusOut() { this._focus = false; }
  render() {
    return (h("div", { class: this.containerClass() },
      h("label", { class: "ibk-checkbox__label" },
        h("input", { class: "ibk-checkbox__hidden", checked: this.checked, type: "checkbox", value: this.value }),
        h("span", { class: "ibk-checkbox__icon" },
          h("i", { class: "ibk-checkbox__check icon-xs-check" })),
        h("span", { class: "ibk-checkbox__text", innerHTML: this.label })),
      (!this._grouped && this.error) && h("span", { class: "ibk-checkbox__error-message", innerHTML: this.requiredMessage })));
  }
  static get is() { return "ibk-checkbox"; }
  static get originalStyleUrls() { return {
    "$": ["checkbox.css"]
  }; }
  static get styleUrls() { return {
    "$": ["checkbox.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Valor del checkbox a devolver cuando sea seleccionado"
      },
      "attribute": "value",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto que describe lo que el usuario elegir\u00E1 o marcar\u00E1. Puede incluirse etiquetas HTML, para agregar enlaces, por ejm. T\u00E9rminos y condiciones.\r\nLos valores de las etiquetas HTML se incluir\u00E1n con comillas simples o dobles, dependiendo de las comillas que se esten usando al definir la propiedad"
      },
      "attribute": "label",
      "reflect": false
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Estado activo del checkbox"
      },
      "attribute": "checked",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Estado inactivo del checkbox"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Error en el checkbox"
      },
      "attribute": "error",
      "reflect": false,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Cuando se encuentra dentro de un \"ibk-form\" al hacer submit si el checkbox se encuentra deseleccionado, mostrar\u00E1 un mensaje de error"
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "requiredMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Personaliza el mensaje de campo requerido"
      },
      "attribute": "required-message",
      "reflect": false,
      "defaultValue": "'Este campo es requerido'"
    },
    "full": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el checkbox ocupa el 100% de la pantalla"
      },
      "attribute": "full",
      "reflect": false,
      "defaultValue": "false"
    },
    "iconPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'left' | 'right'",
        "resolved": "\"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina la posici\u00F3n del \u00EDcono"
      },
      "attribute": "icon-position",
      "reflect": false,
      "defaultValue": "'left'"
    },
    "outline": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El checkbox se ver\u00E1 envuelto en una caja"
      },
      "attribute": "outline",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "_grouped": {},
    "_focus": {}
  }; }
  static get events() { return [{
      "method": "onchecked",
      "name": "onchecked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento con el detalle del checkbox seleccionado"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
  static get listeners() { return [{
      "name": "change",
      "method": "changeCheckbox",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "keydown",
      "method": "onPressEnter",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "focusin",
      "method": "onRadioFocusIn",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "focusout",
      "method": "onRadioFocusOut",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
