import ScalableForm from "scalable-form-core";

import React from "react";
import ScalableForm from "scalable-form-core";
import "./styles.css";

export default class FormExample extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: "",
        city: "hangzhou"
      }
    };
    this.jsonSchema = {
      title: "Scalable Form render sdk with Ant Design components",
      description: "",
      type: "object",
      required: ["name"],
      properties: {
        name: {
          type: "string",
          title: "名称",
          default: "",
          maxLength: 15
        },
        city: {
          type: "string",
          title: "请选择城市",
          default: "",
          enum: ["beijing", "shanghai", "hangzhou"],
          enumNames: ["北京", "上海", "杭州"]
        }
      }
    };
    this.uiSchema = {
      name: {
        "ui:help": '关于"名称"字段的帮助说明',
        "ui:options": {
          placeholder: "请输入名称"
        }
      },
      city: {
        "ui:widget": "radio",
        "ui:options": {
          vertical: false,
          validate: [
            {
              type: "empty",
              message: "请选择"
            }
          ]
        }
      }
    };
  }

  handleChanged = (formData, bizData) => {
    console.log("ScalableForm Changed!", formData);
    console.log("ScalableForm Changed!", bizData);
    this.setState({
      formData: { ...formData }
    });
  };

  handleSubmit = (formData, bizData) => {
    console.log("ScalableForm Submitted!", formData);
    console.log("ScalableForm Submitted!", bizData);
  };

  render() {
    return (
      <div className="scalable-form-demo-element">
        <ScalableForm
          jsonSchema={this.jsonSchema} //jsonSchema用于表述表单字段信息
          uiSchema={this.uiSchema} //uiSchema用于控制表单字段的UI组件
          formData={this.state.formData} //formData是表单中填写的字段数据
          onChange={this.handleChanged}
          onSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}