content: import _ from 'lodash';
  import React, { Component } from 'react';
  import { Field, reduxForm } from 'redux-form';
  import { Link } from "react-router-dom";
  import { connect } from 'react-redux';
  import { createPost } from "../actions/index";
  
  const FIELDS = {
      title: {
          type: 'input',
          label: 'Title For The Post'
      },
      categories: {
          type: 'input',
          label: 'Catogories For The Post'
      },
      content: {
          type: 'textarea',
          label: 'Post Contents'
      }
  };
  
  
  class PostsNew extends Component {
  
      renderTextField(field) {
  
          const { input, labelText, type,  meta: { touched, error } } = field;
          const className = `form-groups ${touched && error ? 'has-danger' : ''}`;
  
          let fieldInput =  <input
                              className="form-control"
                              {...input}
                           />;
  
          if(type== "textarea")
          {
              fieldInput = <textarea
                              className="form-control"
                              {...input}
                           />
          }
  
          return (
              <div className= {className}>
                  <br/>
                  <label>{labelText}</label>
                  {fieldInput}
                  <div className="text-help">
                      {touched ? error : ''}
                  </div>
              </div>
          );
      }
  
      renderFields() {
          return (
              this.props.fields.map(f =>
                  <Field
                      name={f}
                      labelText={FIELDS[f].label}
                      type={FIELDS[f].type}
                      component={this.renderTextField}
                  />
              )
          );
      }
  
      onFormSubmit(values) {
          this.props.createPost(values, () => {
              this.props.history.push('/');
          });
      }
  
      render() {
          const { handleSubmit, reset ,pristine, submitting } = this.props;
  
          return (
              <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
                  {this.renderFields()}
                  <br/>
                  <button type="submit" disabled={pristine || submitting} className="btn btn-primary">SUBMIT</button>
                  <button type="button" disabled={pristine || submitting} className="btn btn-warning" onClick={reset}>CLEAR</button>
                  <Link className="btn btn-danger" to="/"> CANCEL </Link>
              </form>
          )
      }
  }
  
  const validate = values => {
      const errors = {};
  
      _.each(FIELDS, (obj, key) => {
          if(!values[key]) {
              errors[key] = `Enter a value for ${key}`;
          }
      });
  
      return errors;
  }
  
  export default reduxForm({
      validate,
      fields: _.keys(FIELDS),
      form: 'PostsNewForm'
  })(
      connect(null, { createPost })(PostsNew)
  );
  