import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
import { actionCreators } from '../actions/actions'
import CategoryInput from '../components/CategoryInput'
import MessageInput from '../components/MessageInput'
import SubjectInput from '../components/SubjectInput'
import EmailInput from '../components/EmailInput'

class ContactForm extends Component {

  onSubmit = event => {
    console.log('submit')
  }

  onAddEmail = text => {
    const {dispatch} = this.props
    dispatch(actionCreators.add_email(text))
  }

  onEmailError = (type) => {
    const {dispatch} = this.props
    switch (type) {
      case 'error':
        dispatch(actionCreators.add_emailError())
        break;
      default:
        dispatch(actionCreators.remove_emailError())
        break;
    }
  }

  onAddCategory = text => {
    const {dispatch} = this.props
    dispatch(actionCreators.add_category(text))
  }

  onAddSubject = text => {
    const {dispatch} = this.props
    dispatch(actionCreators.add_subject(text))
  }

  onAddSubjectsAvailable = items => {
    const {dispatch} = this.props
    dispatch(actionCreators.add_subjectsAvailable(items))
  }

  onAreSubjectsFound = type => {
    const {dispatch} = this.props
    switch (type) {
      case 'error':
        dispatch(actionCreators.add_noSubjectsFoundError())
        break;
      default:
        dispatch(actionCreators.remove_subjectsSearchError())
        break;
    }
  }

  onAddMessage = text => {
    const {dispatch} = this.props
    dispatch(actionCreators.add_message(text))
  }

  onMessageError = type => {
    const {dispatch} = this.props
    switch (type) {
      case 'error':
        dispatch(actionCreators.add_messageError())
        break;
      default:
        dispatch(actionCreators.remove_messageError())
        break;
    }
  }

  render() {
    const { categoryLabel, subject,
      availableSubjects, noSubjectsFoundError } = this.props

    return (
      <form
        style={{paddingBottom: '20px'}}
        onSubmit={this.onSubmit}
      >
        <EmailInput
          onEmailError={this.onEmailError}
          onEmailChange={this.onAddEmail}
        />
        <CategoryInput
          onSelectCategory={this.onAddCategory}
        />
        <SubjectInput
          onAreSubjectsFound={this.onAreSubjectsFound}
          onFetchSubjects={this.onAddSubjectsAvailable}
          onSubjectChange={this.onAddSubject}
        />
        <MessageInput
          onMessageChange={this.onAddMessage}
          onMessageError={this.onMessageError}
        />
        <button
          className="btn btn-primary"
          type="submit"
        >
          Submit
        </button>
      </form>
    )
  }
}

const mapStateToProps = (state) => ({

})

ContactForm = reduxForm({
  form: 'contact'
})(ContactForm)

export default connect(mapStateToProps)(ContactForm)