import React, {Component, PropTypes} from 'react';
import { connect as connectToReduxStore } from 'react-redux';
import {connect as connectToDefinitions} from '../behaviours/definitions';
import {connect as connectToFieldHelpers} from '../behaviours/field';
import {fetchEntity} from '../actions';
// Dumb components
import Form from './form';
import Field from './field';
import Button from './button';
import Code from './code';


class SmartExampleComponent extends Component{
  constructor(props) {
    super(props);
    this.state = {fields: props.fields};
  }
  componentWillMount(){
    this.props.loadEntity(this.props.id);
  }
  componentWillReceiveProps({fields}){
    if(!fields){
      return;
    }
    const newFields = Object.keys(fields).reduce((res, fieldName)=>{
      res[fieldName] = {name: fieldName, value: fields[fieldName]};
      return res;
    }, {});
    return this.setState({fields: newFields});
  }
  render(){
    const {onSubmit, onChange, fieldFor} = this.props;
    const {fields} = this.state;
    const _onSubmit = (e) => {
      e.preventDefault();
      onSubmit(fields);
    }
    const bFieldFor = fieldFor.bind(this);
    const mFieldFor = name => fieldFor.call(this, name);
    return (
      <Form onSubmit={_onSubmit}>
        {/* Fields auto rendering to test onChange without definitions and redux */}
        <h3>{'Plain react stateless component'}</h3>
        {
          fields && Object.keys(fields).reduce((res, fieldName)=>{
            res.push(<Field key={fieldName} onChange={onChange.bind(this)} {...fields[fieldName]} />);
            return res;
          }, [])
        }
        {/*Field for as props i have to find a way to bind on this without use call*/}
        <h3>{'Use field and definition behaviour'}</h3>
        {fieldFor.call(this,'uuid')}
        {fieldFor.bind(this)('uuid')}
        {bFieldFor('lastName')}
        {mFieldFor('lastName')}
        <Button onClick={_onSubmit}>{'Save'}</Button>
        {/*Debug purpose only show data functions are not displayed*/}
        <Code {...this.props} />
      </Form>
    );
  }

}


SmartExampleComponent.displayName = SmartExampleComponent;
SmartExampleComponent.defaultProps = {
  onSubmit(data){
    console.log('submit', data);
  },
  onChange({name, value}){
      const {fields} = this.state;
      if(fields[name] !== value){
        fields[name] = {name, value, error};
        this.setState({fields});
      }
  }
}
const DefinitionConnectedSmartExampleComponent = connectToDefinitions('user')(SmartExampleComponent);

const ReduxAndDefinitionConnectedSmartExampleComponent = connectToReduxStore(
  ({entity:{data, isLoading}}) => ({fields: data, isLoading}),
  (dispatch) => ({
    loadEntity: (id) => {
      dispatch(fetchEntity({id}));
    }
  })
)(DefinitionConnectedSmartExampleComponent);

const ConnectedSmartExampleComponent = connectToFieldHelpers()(ReduxAndDefinitionConnectedSmartExampleComponent);

export default ConnectedSmartExampleComponent;

@@ -52,17 +52,16 @@
 import %7B
- 
 connect 
@@ -582,24 +582,26 @@
 ount()%7B%0A    
+//
 this.props.l
@@ -1115,108 +1115,8 @@
   %7D%0A
-    const bFieldFor = fieldFor.bind(this);%0A    const mFieldFor = name =%3E fieldFor.call(this, name);%0A
     
@@ -1691,84 +1691,8 @@
 dFor
-.call(this,'uuid')%7D%0A        %7BfieldFor.bind(this)('uuid')%7D%0A        %7BbFieldFor
 ('la
@@ -1714,10 +1714,9 @@
    %7B
-mF
+f
 ield
@@ -1712,34 +1712,35 @@
      %7BfieldFor('
-la
+fir
 stName')%7D%0A      
@@ -2267,24 +2267,20 @@
 %7D%0A%7D%0A
+%0A
 const 
-Definition
+Field
 Conn
@@ -2321,27 +2321,20 @@
 ctTo
-Definitions('user')
+FieldHelpers
 (Sma
@@ -2365,34 +2365,29 @@
 nst ReduxAnd
-Definition
+Field
 ConnectedSma
@@ -2584,26 +2584,21 @@
 %0A  %7D)%0A)(
-Definition
+Field
 Connecte
@@ -2653,32 +2653,33 @@
 ampleComponent =
+ 
  connectToFieldH
@@ -2676,41 +2676,41 @@
 ctTo
-FieldHelpers()(ReduxAndDefinition
+Definitions('user')(ReduxAndField
 Conn

Add behaviour use