import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { combineReducers, createStore } from 'redux';
function formReducer(state = { email: 'frankqian@qq.com' }, action) {
    switch (action.type) {
        case 'save_fields':
            return Object.assign(Object.assign({}, state), action.payload);
        default:
            return state;
    }
}
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this, {
            onChange: (name, value) => {
                console.log('onChange', name, value);
                this.field.setValue('newlen', value.length);
                this.props.dispatch({
                    type: 'save_fields',
                    payload: {
                        [name]: value,
                    },
                });
            },
        });
    }
    componentWillReceiveProps(nextProps) {
        this.field.setValues({
            email: nextProps.email,
            newlen: nextProps.email.length,
        });
    }
    setEmail() {
        this.props.dispatch({
            type: 'save_fields',
            payload: {
                email: 'qq@gmail.com',
            },
        });
    }
    render() {
        const init = this.field.init;
        const newLen = init('newlen', { initValue: this.props.email.length });
        return (React.createElement("div", null,
            React.createElement(Input, Object.assign({}, init('email', { initValue: this.props.email }, {
                rules: [
                    { required: true, type: 'email', message: 'at least 5 chars' },
                ],
            }))),
            "now length is:",
            newLen.value,
            React.createElement("p", null,
                "email: ",
                this.props.email),
            React.createElement(Button, { onClick: this.setEmail.bind(this) }, "set")));
    }
}
const ReduxDemo = connect((state) => {
    return {
        email: state.formReducer.email,
    };
})(Demo);
const store = createStore(combineReducers({
    formReducer,
}));
ReactDOM.render(React.createElement(Provider, { store: store },
    React.createElement("div", null,
        React.createElement(ReduxDemo, null))), document.getElementById('field-demo-7'));
