import { Component, Element, Event, h, Prop } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkRadioGroup {
  constructor() {
    /** Define si los radio se alinearán uno al lado de otro */
    this.inline = false;
    /** Error en el radio group */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si todos los radios se encuentra deseleccionados, mostrará un mensaje de error */
    this.required = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = 'Selecciona una opción';
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-radio-group', [
        { inline: this.inline },
        { error: this.error }
      ]);
    };
    /** Escucha el evento al seleccionar algún radio dentro del gruppo */
    this.listenSlottedEvents = () => {
      const radios = this.host.querySelectorAll('ibk-radio');
      Array.from(radios, (radio) => {
        radio.addEventListener('onselect', (e) => {
          this.onchange.emit(e.detail);
          this.error = false;
          Array.from(radios, (c) => {
            const value = c.getAttribute('value');
            if (value != e.detail.value) {
              c.removeAttribute('selected');
            }
            c.removeAttribute('error');
          });
        });
        if (this.error) {
          radio.setAttribute('error', '');
        }
      });
    };
  }
  componentDidLoad() {
    this.listenSlottedEvents();
  }
  render() {
    return (h("div", { class: this.containerClass() },
      h("div", { class: "ibk-radio-group__list" },
        this.subtitle && h("p", { class: "ibk-radio-group__subtitle", innerHTML: this.subtitle }),
        h("slot", null)),
      this.error && h("span", { class: "ibk-radio-group__error-message", innerHTML: this.requiredMessage })));
  }
  static get is() { return "ibk-radio-group"; }
  static get originalStyleUrls() { return {
    "$": ["radio-group.css"]
  }; }
  static get styleUrls() { return {
    "$": ["radio-group.css"]
  }; }
  static get properties() { return {
    "subtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto de ayuda que indica de que trata el grupo de opciones"
      },
      "attribute": "subtitle",
      "reflect": false
    },
    "inline": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si los radio se alinear\u00E1n uno al lado de otro"
      },
      "attribute": "inline",
      "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 group"
      },
      "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 todos los radios se encuentra deseleccionados, 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": "'Selecciona una opci\u00F3n'"
    }
  }; }
  static get events() { return [{
      "method": "onchange",
      "name": "onchange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento con el detalle de cada radio seleccionado"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
}
