import { Component, Element, h, Prop, State, Watch } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkFormGroup {
  constructor() {
    /** Define si los campos se encontrarán unidos, sin espaceios entre si */
    this.joined = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = "Los campos son requeridos";
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-form-group', [
        { joined: this.joined }
      ]);
    };
    this.setFocus = () => {
      this._allFields.forEach((field) => {
        field.addEventListener('onfocus', (e) => {
          var _a;
          const next = (_a = field.nextElementSibling) === null || _a === void 0 ? void 0 : _a.querySelector('.ibk-textfield__input, .ibk-dropdown__input');
          if (next && field.getAttribute('error') == null) {
            if (e.detail == 'in') {
              next.style.borderLeft = '1px solid #05be50';
            }
            else if (e.detail == 'out') {
              next.removeAttribute('style');
            }
          }
        });
      });
    };
    /** Elimina los contenedores de los mensajes de error de los campos en el grupo */
    this.configFieldProperties = () => {
      var _a;
      const _fieldsWidth = (_a = this.fieldsWidth) === null || _a === void 0 ? void 0 : _a.split(',');
      this._allFields.forEach((field, index) => {
        if (_fieldsWidth && _fieldsWidth[index]) {
          field.style.width = `${_fieldsWidth[index]}%`;
        }
        if (this.error) {
          field.setAttribute('error', '');
        }
        else {
          field.removeAttribute('error');
        }
        if (this.joined) {
          field.setAttribute('no-handling-error', '');
        }
        else {
          if (this.required) {
            field.setAttribute('required', '');
          }
          else {
            field.removeAttribute('error');
          }
        }
      });
    };
  }
  componentWillLoad() {
    this._allFields = this.host.querySelectorAll('ibk-textfield, ibk-dropdown');
    this.setFocus();
    this.configFieldProperties();
  }
  watchingError() {
    this.configFieldProperties();
  }
  render() {
    return (h("div", { class: this.containerClass() },
      this.label && h("span", { class: "ibk-form-group__label", innerHTML: this.label }),
      this.subtitle && h("span", { class: "ibk-form-group__subtitle", innerHTML: this.subtitle }),
      h("div", { class: "ibk-form-group__list" },
        h("slot", null)),
      this.joined && h("span", { class: "ibk-form-group__error-message", innerHTML: this.error && this.requiredMessage })));
  }
  static get is() { return "ibk-form-group"; }
  static get originalStyleUrls() { return {
    "$": ["form-group.css"]
  }; }
  static get styleUrls() { return {
    "$": ["form-group.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto de ayuda encima del grupo de campos"
      },
      "attribute": "label",
      "reflect": false
    },
    "subtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se incluye el subtitulo entre el label (si existiera) y el grupo de campos"
      },
      "attribute": "subtitle",
      "reflect": false
    },
    "joined": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si los campos se encontrar\u00E1n unidos, sin espaceios entre si"
      },
      "attribute": "joined",
      "reflect": false,
      "defaultValue": "false"
    },
    "fieldsWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se ingresar\u00E1n los anchos de los campos separados por coma. Los n\u00FAmeros ingresados deber\u00E1n sumar 100\r\nEjm. Para un grupo de dos campos el valor de la propiedad ser\u00E1 similar a \"30,70\"\r\nEstos valores ser\u00E1n registrados como porcentajes. Por defecto todos los campos tendr\u00E1n el mismo tama\u00F1o"
      },
      "attribute": "fields-width",
      "reflect": false
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si el grupo mostrar\u00E1 un mensaje de error"
      },
      "attribute": "error",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define si todos los campos del grupo son requeridos"
      },
      "attribute": "required",
      "reflect": 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": "\"Los campos son requeridos\""
    }
  }; }
  static get states() { return {
    "_firstFocus": {}
  }; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "error",
      "methodName": "watchingError"
    }]; }
}
