import template from "./Form.html";
  import style from "antd/lib/form/style/index.css";
  
  class Form {
      useModules = ["esNgAntd"];
  

      context = true;

  
      state = {

          formItems: [],

      };

      constructor($element) {

          esNgAntd.createStyle("ant-form", style);

  
          if (this.form !== undefined) {
              this.form = $scope;
          }

          if (this.props.name) {
              let inputs = $element[0].querySelectorAll("input");
              for (let i = 0; i < inputs.length; i++) {
                  const element = inputs[i];
                  element.id = this.props.name + "_" + element.id;
              }
          }
      }
  

      resetFields() {
          this.state.formItems.forEach(function (item) {

              if (typeof item.setValue === "function") {
                  item.setValue(item.defaultValue || null);
              } else {
                  item.value = null;
              }
          });

      }
  

      submit() {
          this.handleSubmit();
      }
  

      handleSubmit() {
          let values = {};

          this.state.formItems.forEach(function (item) {

              let name = item.antdFormItem && item.antdFormItem.name;

              let value = null;
              if (item.state.type === "checkbox") {
                  value = item.state.checked;
              } else {
                  value = item.value || item.state.value
              }

              values[name] = value;

          });

          this.props.onFinish({
              values: values,
          });
      }

  
      render() {
          return template;
      }

  }

  
  Form.propTypes = {
      name: PropTypes.string,
      labelCol: PropTypes.object,
      wrapperCol: PropTypes.object,
      form: PropTypes.object,
      onFinish: PropTypes.function,
  };