import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from '../../actions'

class AddFeed extends Component{

    constructor(){
        super()
        this.state = {
            feed: {
                name:'',
                url:''
            }
        }
    }

    updateFeed(field, event){

        let feed = Object.assign({}, this.state.feed)
        feed[field] = event.target.value

        this.setState({
            feed: feed
        })
    }

    addFeed(event){
        event.preventDefault()
        this.props.createFeed(this.state.feed)
        .then((data)=>{
            console.log(JSON.stringify(data))
            this.setState({
                feed: {
                    name: '',
                    url: ''
                }
            })
        })
        .catch((error)=>{
            alert('Error: ' + error.message)
        })
    }


    render(){
        return(
            <form method="post" action="#">
                <input onChange={this.updateFeed.bind(this, 'name')} value={this.state.feed.name} type="text" placeholder="Name" />
                <input onChange={this.updateFeed.bind(this, 'url')} value={this.state.feed.url} type="text" placeholder="Feed URL" />
                <button onClick={this.addFeed.bind(this)}>Add Feed</button>
            </form>
        )
    }
}

const stateToProps = (state) => {
    return {
    }
}

const dispatchToProps = (dispatch) => {
    return {
        createFeed: (feed) => dispatch(actions.createFeed(feed))
    }
}

export default connect(stateToProps, dispatchToProps)(AddFeed)