import React, { Component } from 'react';
import { connect } from 'react-redux'
import { TextField, RaisedButton } from 'material-ui';
import {updateText, pushToDo} from '../../../store/actions'


class ToDoForm extends Component{

    constructor(props){
        super(props);
    }

    _handleChange = (event) => {
        const value = event.target.value;
        this.props.dispatch(updateText(value))
    }

    _handleSubmit = (event) => {
        event.preventDefault();
        this.props.dispatch(pushToDo(this.props.todoText));
    }


    render(){
        const style = {
          margin: 12,
        };
        return(
              <div>
              <form>
              <TextField
                 id="todoText"
                 name="todoText"
                 hintText="Enter a todo"
                 floatingLabelText="Enter a todo"
                 value={this.props.todoText}
                 onChange={this._handleChange}
               />
               <RaisedButton
                label="Submit"
                primary={true}
                style={style}
                onClick={this._handleSubmit}
              />
              </form>
              </div>
          )
    }
}

const mapStateToProps = state => ({
  todoText: state.toDoReducer.todoText
});

export default connect(mapStateToProps)(ToDoForm);
