import { generateRandomString } from '@dvn/core/util/string';
import { Component, Event, h, Host, Prop, State } from '@stencil/core';
import { generateField } from '../FieldGenerator';
import { generateState, generateStateOnFieldBlur, generateStateOnFieldChange, handleButtonClick } from './form-util';
export class DoldurmaForm {
  constructor() {
    this.extraButtons = [];
    this.layout = 'vertical';
    this.preventSubmitEvent = true;
    this.progressing = false;
    this.onSubmit = (e) => {
      if (this.preventSubmitEvent) {
        e.preventDefault();
      }
      e.stopPropagation();
      const state = handleButtonClick(this.fields, this.formState, (values, errors, context) => {
        this.submit.emit({ values, errors, context });
      }, this.passErrorsToSubmit);
      if (state) {
        this.formState = state;
      }
    };
    this.onFieldChange = (field, value) => {
      this.formState = generateStateOnFieldChange(this.fields, this.formState, field, value);
    };
    this.onFieldBlur = (field) => {
      this.formState = generateStateOnFieldBlur(this.formState, field);
    };
  }
  componentWillLoad() {
    this.formState = generateState(this.fields);
    this.formId = generateRandomString();
  }
  render() {
    const { formErrors, extraButtons, fields, layout, progressing, submitButtonLabel } = this;
    const { errors, values, visibilities } = this.formState;
    const style = {};
    if (this.minHeight) {
      style['--form-min-height'] = this.minHeight;
    }
    if (this.width) {
      style['--form-width'] = this.width;
    }
    return (h(Host, { class: {
        [layout]: true,
      }, style: style },
      h("form", { onSubmit: this.onSubmit },
        h("div", { class: "fields-container" }, fields.map(field => {
          if (visibilities[field.id] === false) {
            // don't render the field if it is not visible
            // false is intentionally checked because we want to show it when undefined
            return null;
          }
          const input = generateField(field, values[field.id], errors[field.id], progressing, this.onFieldChange, this.onFieldBlur);
          const fieldError = (errors[field.id] && errors[field.id].length > 0) ? errors[field.id][0] : undefined;
          return (h("dvn-form-field", { id: field.id, key: field.id, required: field.required, layout: layout, fieldTitle: field.title, description: field.description, 
            // labelWidth={labelWidth}
            error: fieldError }, input));
        })),
        formErrors &&
          h("div", { class: "form-errors-container" }, formErrors.map(formError => h("div", null, formError))),
        h("div", { class: "button-container" },
          extraButtons.map(button => h("dvn-button", { key: button.label, tint: button.type, disabled: button.loading, progressing: button.loading, onClick: () => this.onExtraButtonClick(button.onClick) }, button.label)),
          submitButtonLabel &&
            h("dvn-button", { tint: "primary", htmlType: "submit", disabled: progressing, progressing: progressing, leaned: true, formId: this.formId }, submitButtonLabel)))));
  }
  onExtraButtonClick(callback) {
    const state = handleButtonClick(this.fields, this.formState, callback, true);
    if (state) {
      this.formState = state;
    }
  }
  static get is() { return "doldurma-form"; }
  static get originalStyleUrls() { return {
    "$": ["doldurma-form.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["doldurma-form.css"]
  }; }
  static get properties() { return {
    "fields": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "BaseField[]",
        "resolved": "BaseField[]",
        "references": {
          "BaseField": {
            "location": "import",
            "path": "../BaseField"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "formErrors": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "extraButtons": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "ButtonProps[]",
        "resolved": "ButtonProps[]",
        "references": {
          "ButtonProps": {
            "location": "import",
            "path": "./form-util"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "layout": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'horizontal' | 'vertical'",
        "resolved": "\"horizontal\" | \"vertical\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "layout",
      "reflect": false,
      "defaultValue": "'vertical'"
    },
    "passErrorsToSubmit": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pass-errors-to-submit",
      "reflect": false
    },
    "preventSubmitEvent": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "prevent-submit-event",
      "reflect": false,
      "defaultValue": "true"
    },
    "progressing": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "progressing",
      "reflect": false,
      "defaultValue": "false"
    },
    "submitButtonLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "submit-button-label",
      "reflect": false
    },
    "minHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "min-height",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    }
  }; }
  static get states() { return {
    "formState": {}
  }; }
  static get events() { return [{
      "method": "submit",
      "name": "submit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
