// ******** Redux section ************


var reducer = function(state,action){
  switch(action.type){
    case 'ADD': return state.concat(action.text);
    default: return state;
  }
};

var initial = ['Carpe diem'];

var store = Redux.createStore(reducer,initial);

var actionCreators = {
  addQuote: function(text){
    return {type:'ADD',text:text};
  }
};


// ********* React components ***********


var QuoteList = function(props){
  var list = props.quotes.map(function(q,n){
    return <li key={n}>{q}</li>;
  });
  return (
    <div className="quoteslist">
      <h3>Words of Wisdom</h3>
      <ul>{list}</ul>
    </div>
  );
};

var QuoteForm = React.createClass({
  submit: function(e){
    var field = this.refs.field;
    var quote = field.value;
    this.props.callback(quote);
    field.value = '';
    e.preventDefault();
  },
  render: function(){
    return (
      <form onSubmit={this.submit}>
        <input ref='field' />
        <button type='submit'>Add</button>
      </form>
    );
  }
});

var App = function(props){
  return <div>
    <QuoteListContainer/>
    <QuoteFormContainer/>
  </div>;
};


// ********* Component wrappers ***********


var mapStateToQuoteListProps = function(state){
  return { quotes: state };
};

var QuoteListContainer = ReactRedux.connect(
  mapStateToQuoteListProps
)(QuoteList);


var QuoteFormContainer = ReactRedux.connect(
  null,
  {callback: actionCreators.addQuote}
)(QuoteForm);


// ********* Initialization section ***********


var Provider = ReactRedux.Provider;

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById("container")
);
store.dispatch({type:'BOGUSEVENT'});