import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { bookOffice } from '../actions';

class BookingForm extends Component {
  constructor(props) {
    super(props);
    this.state = { id:'' };
  }
  componentDidMount() {
    const { id } = this.props.match.params;
    this.setState({ id });
    console.log('BookingForm component mounted - id:', id);
    this.props.change('id', id);
  }
  onSubmit(fields) {
    console.log('office booking form submit - fields', fields);
    this.props.bookOffice(fields, () => {
      console.log('callback from bookOffice');
      //this.props.history.push('/');
    });
  }
  renderInputField(field) {
    const { meta:{ touched, error } } = field;
    const className = `form-group ${ touched && error ? 'has-danger' : '' }`;
    return (
      <div className={className}>
        <label>{ field.label }</label>
        <input 
          { ...field.input }
          className="form-control"
          type="text"
        />
        <div className="text-help">
          { touched ? error : '' }
        </div>
      </div>
    );
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="col-md-6">
        <div>Booking Form</div>
        <div>Office id: { this.state.id }</div>
        <hr/>
        <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
          <Field 
            name="id"
            label="Office ID"
            component={ this.renderInputField }
          />
          <Field 
            name="title"
            label="Title"
            component={ this.renderInputField }
          />
          <Field 
            name="value"
            label="Value"
            component={ this.renderInputField }
          />
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};
  if (!values.title) {
    errors.title = 'Enter a title';
  }
  console.log('validate - input:', values,'errors:', errors);
  return errors;
}

export default reduxForm({ 
  form:'bookingForm',
  validate: validate
})(
  connect(null, { bookOffice })(BookingForm)
);

@@ -486,16 +486,23 @@
 change('
+office_
 id', id)
@@ -627,16 +627,20 @@
 ields, (
+data
 ) =%3E %7B%0A 
@@ -681,17 +681,31 @@
 okOffice
-'
+ - data:', data
 );%0A     
@@ -1508,16 +1508,23 @@
   name=%22
+office_
 id%22%0A    
@@ -1646,20 +1646,25 @@
   name=%22
-titl
+start_tim
 e%22%0A     
@@ -1681,12 +1681,153 @@
 el=%22
-Titl
+Start Date%22%0A            component=%7B this.renderInputField %7D%0A          /%3E%0A          %3CField %0A            name=%22end_time%22%0A            label=%22End Dat
 e%22%0A 
@@ -1922,20 +1922,20 @@
   name=%22
-valu
+pric
 e%22%0A     
@@ -1952,12 +1952,12 @@
 el=%22
-Valu
+Pric
 e%22%0A 
@@ -2198,20 +2198,25 @@
 !values.
-titl
+start_tim
 e) %7B%0A   
@@ -2223,20 +2223,25 @@
  errors.
-titl
+start_tim
 e = 'Ent
@@ -2247,14 +2247,17 @@
 ter 
-a titl
+start tim
 e';%0A
@@ -2266,67 +2266,75 @@
 %7D%0A  
-console.log('validate - input:', values,'errors:', errors);
+if (!values.end_time) %7B%0A    errors.end_time = 'Enter end time';%0A  %7D
 %0A  r

change fields in booking form to match data model