import { Component, Element, Event, h } from "@stencil/core";
import { regexValidators } from '../../utils/utils';
export class IbkForm {
  constructor() {
    this.submitForm = (e) => {
      e.preventDefault();
      let wrongElements = 0;
      this._formElements.forEach((element) => {
        var _a;
        if (element.tagName.toLowerCase() == 'ibk-form-group') {
          const fields = element.querySelectorAll('ibk-textfield, ibk-dropdown');
          const required = element.getAttribute('required');
          const joined = element.getAttribute('joined');
          let empty = false;
          fields.forEach((field) => {
            if (required != null) {
              field.setAttribute('required', '');
            }
            if (joined != null) {
              if (field.tagName.toLowerCase() == 'ibk-textfield') {
                const value = field.querySelector('.ibk-textfield__value').value;
                if (value == '') {
                  empty = true;
                }
              }
              else if (field.tagName.toLowerCase() == 'ibk-dropdown') {
                const value = field.querySelector('.ibk-dropdown__value').value;
                if (value == '') {
                  empty = true;
                }
              }
            }
          });
          if (empty && required != null) {
            element.setAttribute('error', '');
          }
        }
        if (element.tagName.toLowerCase() == 'ibk-textfield') {
          element.setAttribute('submitted', '');
          const required = element.getAttribute('required');
          const type = (_a = element.getAttribute('type')) !== null && _a !== void 0 ? _a : 'text';
          const value = element.querySelector('.ibk-textfield__value').value;
          let regex;
          if (required != null && value == '') {
            element.setAttribute('error', '');
            wrongElements++;
          }
          else {
            switch (type) {
              case 'password':
              case 'text':
              case 'date':
                regex = regexValidators.empty;
                break;
              case 'dni':
                regex = regexValidators.dni;
                break;
              case 'document':
                regex = regexValidators.document;
                break;
              case 'email':
                regex = regexValidators.email;
                break;
              case 'number':
                regex = regexValidators.numberFormat;
                break;
              case 'expiration':
                regex = regexValidators.expiration;
                break;
              case 'cvv':
                regex = regexValidators.cvv;
                break;
              case 'phone':
                regex = regexValidators.number;
                break;
            }
            if (value != '' && regex != undefined && !regex.test(value)) {
              element.setAttribute('error', '');
              wrongElements++;
            }
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-dropdown') {
          const required = element.getAttribute('required');
          const value = element.querySelector('.ibk-dropdown__value').value;
          if (required != null && value == '') {
            element.setAttribute('error', '');
            wrongElements++;
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-checkbox') {
          const required = element.getAttribute('required');
          const checked = element.getAttribute('checked');
          const grouper = element.closest('ibk-checkbox-group');
          if (required != null && checked == null && grouper == null) {
            element.setAttribute('error', '');
            wrongElements++;
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-checkbox-group') {
          const required = element.getAttribute('required');
          const checked = element.querySelectorAll('ibk-checkbox[checked]');
          if (required != null && checked.length == 0) {
            element.setAttribute('error', '');
            Array.from(element.querySelectorAll('ibk-checkbox'), (checkbox) => checkbox.setAttribute('error', ''));
            wrongElements++;
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-radio') {
          const required = element.getAttribute('required');
          const selected = element.getAttribute('selected');
          const grouper = element.closest('ibk-radio-group');
          if (required != null && selected == null && grouper == null) {
            element.setAttribute('error', '');
            wrongElements++;
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-radio-group') {
          const required = element.getAttribute('required');
          const selected = element.querySelector('ibk-radio[selected]');
          if (required != null && selected == null) {
            element.setAttribute('error', '');
            Array.from(element.querySelectorAll('ibk-radio'), (radio) => radio.setAttribute('error', ''));
            wrongElements++;
          }
        }
        else if (element.tagName.toLowerCase() == 'ibk-calendar') {
          const required = element.getAttribute('required');
          const value = element.querySelector('.ibk-calendar__input').value;
          const multiselect = element.getAttribute('multiselect');
          let error = false;
          if (multiselect != null) {
            const splitted = value.split('-');
            if (splitted.length == 1 || (splitted.length == 2 && splitted[1].trim() == '')) {
              error = true;
            }
          }
          else {
            if (value == '') {
              error = true;
            }
          }
          if (required != null && error) {
            element.setAttribute('error', '');
            wrongElements++;
          }
        }
      });
      this.onsubmit.emit(wrongElements == 0);
    };
  }
  componentDidLoad() {
    this._formElements = this.host.querySelectorAll('ibk-textfield, ibk-form-group, ibk-dropdown, ibk-checkbox, ibk-checkbox-group, ibk-radio, ibk-radio-group, ibk-calendar');
  }
  render() {
    return (h("form", { class: "ibk-form", onSubmit: (e) => this.submitForm(e) },
      h("slot", null)));
  }
  static get is() { return "ibk-form"; }
  static get styles() { return [".ibk-form { display: block; }"]; }
  static get events() { return [{
      "method": "onsubmit",
      "name": "onsubmit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emite un evento al hacer submit del formulario, envia un dato boolean en true cuando el formulario es v\u00E1lido y false cuando no lo es"
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
}
