import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { modifiersToClass } from "../../utils/utils";
export class IbkRadio {
  constructor() {
    /** Estado activo del radio */
    this.selected = false;
    /** Estado inactivo del radio */
    this.disabled = false;
    /** Error en el radio */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si el radio se encuentra deseleccionado, mostrará un mensaje de error */
    this.required = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = 'Este campo es requerido';
    /** Determina la posición del ícono */
    this.iconPosition = 'left';
    /** El radio se verá envuelto en una caja */
    this.outline = false;
    /** Determina si el radio ocupa el 100% de la pantalla */
    this.full = false;
    /** El radio estará agrupado en "ibk-radio-group" */
    this._grouped = false;
    /** Estado focus del radio */
    this._focus = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-radio', [
        this.iconPosition,
        { outline: this.outline },
        { selected: this.selected },
        { disabled: this.disabled },
        { error: this.error },
        { full: this.full },
        { focus: this._focus }
      ]);
    };
  }
  componentWillLoad() {
    this.groupVerification();
  }
  changeRadio() {
    this.host.setAttribute('selected', '');
    this.host.removeAttribute('error');
    this.onselect.emit({
      selected: this.selected,
      value: this.value
    });
  }
  /** Verificar si el checkbox se encuentra agrupado */
  groupVerification() {
    const grouper = this.host.closest('ibk-radio-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-radio__label" },
        h("input", { class: "ibk-radio__hidden", checked: this.selected, type: "radio", value: this.value }),
        h("span", { class: "ibk-radio__icon" },
          h("i", { class: "ibk-radio__dot" })),
        h("span", { class: "ibk-radio__text", innerHTML: this.label })),
      (!this._grouped && this.error) && h("span", { class: "ibk-radio__error-message", innerHTML: this.requiredMessage })));
  }
  static get is() { return "ibk-radio"; }
  static get originalStyleUrls() { return {
    "$": ["radio.css"]
  }; }
  static get styleUrls() { return {
    "$": ["radio.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 radio 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"
      },
      "attribute": "label",
      "reflect": false
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Estado activo del radio"
      },
      "attribute": "selected",
      "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 radio"
      },
      "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 radio"
      },
      "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 radio 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'"
    },
    "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 radio se ver\u00E1 envuelto en una caja"
      },
      "attribute": "outline",
      "reflect": false,
      "defaultValue": "false"
    },
    "full": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el radio ocupa el 100% de la pantalla"
      },
      "attribute": "full",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "_grouped": {},
    "_focus": {}
  }; }
  static get events() { return [{
      "method": "onselect",
      "name": "onselect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento con el detalle del radio seleccionado"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
  static get listeners() { return [{
      "name": "change",
      "method": "changeRadio",
      "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
    }]; }
}
