import React, {FormEvent, useState} from 'react';
import Form from 'lib/form';
import './index.scss';
import {FormValue} from "../../../lib/form";
import Button from "../../../lib/button";
import CodesWrapper from "../CodesWrapper";


const FormExample = () => {
  const [values, setValues] = useState<FormValue>({
    username: '',
    password: ''
  });
  const fields = [
    {
      key: 'username',
      label: '用户名',
      formItem: { type: 'text' },
      rules: [
        {
          required: true,
          message: 'required!'
        },
        {
          minLength: 8,
          message: 'to short'
        }
      ]
    },
    {
      key: 'password',
      label: '密码',
      formItem: { type: 'password' },
      rules: [
        {
          required: true,
          message: 'required!'
        },
        {
          minLength: 8,
          message: 'to short'
        }
      ]
    },
    {
      key: 'submit',
      label: 'hi',
      formItem: { type: 'none', item: <Button type={"primary"}>提交</Button> },
    },
  ];
  const onSubmit = (e: FormEvent, values: FormValue) => {
    console.log(e);
    console.log(values);
  };

  const formLayout = {
    labelCol: {
      span: 3,

    },
    wrapperCol: {
      span: 12,
    },
    style: {
      marginBottom: '20px'
    }
  };

  const component1 = (
    <div>
      <h3>Normal form</h3>
      <p >正常状态下的表单中每一项的布局集成了 Grid 组件。也就是说，对 fields 数组里的每一项，都是一个 Row，其中的 label 和 input 元素是内部的两个 Col，
      并且，此时可以分部为这两项传入 style，这里的布局样式完全参考了 Ant-Design。errors 信息都会在 onChange 时作为第二个参数返回。 </p>

      <br/>
      <Form
        formLayout={formLayout}
        values={values}
        fields={fields}
        onSubmit={onSubmit}
        onChange={(values, errors) => {
          setValues(values);
        }}
      />
    </div>
  );

  const formCode1 = `
    const formLayout = {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 12,
      },
      style: {
        marginBottom: '20px'
      }
    };

    <div style={{width: '800px'}}>
      <Form
        formLayout={formLayout}
        values={values}
        fields={fields}
        onSubmit={onSubmit}
        onChange={(values, errors) => {
          setValues(values);
        }}
      />
    </div>
  `;



  const component2 = (
    <div style={{ width: '800px' }}>
      <h3>Google style form</h3>
      <Form
        formItemStyle={"google"}
        formLayout={formLayout}
        values={values}
        fields={fields}
        onSubmit={onSubmit}
        onChange={(values, errors) => {
          setValues(values);
        }}
      />
    </div>
  );
  const formCode2 = `
      style: {
        marginBottom: '20px'
      }
    };

    <div>
      <h3>Google style form</h3>
      <Form
        formItemStyle={"google"}
        formLayout={formLayout}
        values={values}
        fields={fields}
        onSubmit={onSubmit}
        onChange={(values, errors) => {
          setValues(values);
        }}
      />
    </div>
  `;

  const componentData = (
    <p>表单组件主要需要两个参数：values, fields，values 里面的值会被作为初始值。当你的 fields 里的 formItem 的 type
      被设置为 「none」时，可以把你的自定义组件写入 formItem 的 item，比如，这里的 Button 就是这样传入的。点击 「show code」来查看他们的格式</p>
  );

  const formDataCode = `
    const values = {
        username: ''
    }
    const fields = [
    {
      key: 'username',
      label: '用户名',
      formItem: { type: 'text' },
      rules: [
        {
          required: true,
          message: 'required!'
        },
        {
          minLength: 8,
          message: 'to short'
        }
      ]
    },
    {
      key: 'password',
      label: '密码',
      formItem: { type: 'password' },
      rules: [
        {
          required: true,
          message: 'required!'
        },
        {
          minLength: 8,
          message: 'to short'
        }
      ]
    },
    {
      key: 'submit',
      label: 'hi',
      formItem: { type: 'none', item: <Button type={"primary"}>提交</Button> },
    },
  ];
  `;
  return (
    <div>
      <CodesWrapper codes={formDataCode} component={componentData} codeHeight={240}/>
      <CodesWrapper codes={formCode1} component={component1} codeHeight={240}/>
      <CodesWrapper codes={formCode2} component={component2} codeHeight={240}/>
    </div>
    )
};

export default FormExample;
