import { Component, Element, Event, h, Prop } from "@stencil/core";
import { modifiersToClass } from "../../utils/utils";
export class IbkCheckboxGroup {
  constructor() {
    /** Define si los checkbox se alinearán uno al lado de otro */
    this.inline = false;
    /** Error en el checkbox group */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si todos los checkboxes 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-checkbox-group', [
        { inline: this.inline },
        { error: this.error }
      ]);
    };
    /** Escucha el evento al seleccionar algún checkbox dentro del gruppo */
    this.listenSlottedEvents = () => {
      const checkboxes = this.host.querySelectorAll('ibk-checkbox');
      let checked = [];
      Array.from(checkboxes, (check) => {
        checked.push({
          checked: false,
          value: check.getAttribute('value')
        });
        check.addEventListener('onchecked', (e) => {
          let current = checked.findIndex(c => c.value == e.detail.value);
          checked[current] = e.detail;
          this.oncheckedgroup.emit(checked);
          this.error = false;
          Array.from(checkboxes, (c) => c.removeAttribute('error'));
        });
        if (this.error) {
          check.setAttribute('error', '');
        }
      });
    };
  }
  componentDidLoad() {
    this.listenSlottedEvents();
  }
  render() {
    return (h("div", { class: this.containerClass() },
      h("div", { class: "ibk-checkbox-group__list" },
        this.subtitle && h("p", { class: "ibk-checkbox-group__subtitle", innerHTML: this.subtitle }),
        h("slot", null)),
      this.error && h("span", { class: "ibk-checkbox-group__error-message", innerHTML: this.requiredMessage })));
  }
  static get is() { return "ibk-checkbox-group"; }
  static get originalStyleUrls() { return {
    "$": ["checkbox-group.css"]
  }; }
  static get styleUrls() { return {
    "$": ["checkbox-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 checkbox 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 checkbox 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 checkboxes 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": "oncheckedgroup",
      "name": "oncheckedgroup",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento con el detalle de cada checkbox seleccionado"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
}
