import React from 'react';
import {bindActionCreators} from "redux";
import {connect} from 'react-redux';
import * as actions from '../actions';
import Events from '../components/Events';
import AddEvent from '../components/AddEvent';

function mapStateToProps(state){
    // my store is structured like this: {routing: {}, state{ events: {}}}
    const {events} = state.state;
    return {
        events: events
    }
}

// Implementing this after mapStateToProps is working
function mapDispatchToProps(dispatch){
    return {
        dispatchAddEvent: bindActionCreators(actions.fetchEvents, dispatch)
    }
}


class EventsContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {store} = this.context;
        // need to actually fetch events for them to load
        store.dispatch(actions.fetchEvents());
    }

    addEvent(eventName) {
        const {store} = this.context;
        store.dispatch(actions.addEvent(eventName));
    }

    render() {
        return(
            <div>
                <Events events={this.props.events} />
                <AddEvent addEvent={this.addEvent.bind(this)}/>
            </div>);
    }
}

EventsContainer.contextTypes = {
    store: React.PropTypes.object
};

export default connect(mapStateToProps)(EventsContainer);