import React, { Component, useContext } from 'react';
import ReactDOM from 'react-dom';
import {
    Form,
    Input,
    Button
} from 'antd'
import { 
    FormContext,
    FormContextProvider,
    FormContextConsumer,
    useFormContext
} from '@wx-rock/form-context'


const Password = () => {
    const {getFieldDecorator} = useFormContext()
    return getFieldDecorator('passwd', {
        rules: [{required: true}]
    })(<Input placeholder="输入密码"/>)
}


const UserName = () => {
    const {getFieldDecorator} = useFormContext()
    let ctx = useFormContext()
    console.log('ctx:', ctx)
    return getFieldDecorator('username', {
        rules: [{required: true}]
    })(<Input placeholder="输入用户名"/>)
}


class Age extends Component{

    render () {
        return <FormContextConsumer>
            {
                (form) => {
                    const {getFieldDecorator} = form
                    return getFieldDecorator('age', {
                        rules: [{required: true}]
                    })(<Input placeholder="输入年龄"/>)
                }
            }
        </FormContextConsumer>        
    }
}

class Submit extends Component{
     render () {
        return <FormContextConsumer>
            {
                (form, ...args) => {
                    return <Button onClick={(e) => {
                        form.validateFields((err, val) => {
                            console.log(val)
                            this.props.onSubmit()
                        })
                    }}>查询</Button>
                }
            }
        </FormContextConsumer>   
    }
}

class App extends Component {

  render() {

    return (
      <div>
        <h3>Form Context</h3>
        <div>
            <h3>form1</h3>
            <FormContextProvider value={{a:5}}>
                <Form>
                    <Form.Item label="用户名:">
                        <UserName/>
                    </Form.Item>
                     <Form.Item label="密码:">
                        <Password/>
                    </Form.Item>
                    <Form.Item label="年龄:">
                        <Age/>
                    </Form.Item>
                    <Form.Item label="&emsp;">
                        <Submit onSubmit={(...args) => {
                            console.log('submit', args)
                        }}></Submit>
                    </Form.Item>
                </Form>
            </FormContextProvider>
        </div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);