import React from 'react' import {connect} from 'react-redux' import * as actionCreators from '../redux/reducer'

import {ReactLogo, Icon} from './FeatureWidgets'

export const HelloWithRedux = React.createClass({

propTypes: {
  greeting: React.PropTypes.string.isRequired,
  details: React.PropTypes.string.isRequired,
  setGreeting: React.PropTypes.func.isRequired
},
render () {
  return <div className='bordered-component'>
    <h2><ReactLogo /> This is the HelloWithRedux component</h2>
    <div className='source'>from the <code>HelloWithRedux.jsx</code> file in <Icon icon='folder-open' /> <code>client/src/components</code></div>

    <div className='info-block'>
      <label htmlFor='redux-greeting'><strong>Change greeting</strong>: </label>
      <input type='text' id='redux-greeting' value={this.props.greeting} onChange={(e) => this.props.setGreeting(e.target.value)}/>
    </div>

    <div className='info-block'><strong>Current greeting</strong>: {this.props.greeting}</div>
    <div className='info-block'><strong>Details</strong>: {this.props.details}</div>
  </div>
}

})

function mapStateToProps (state) {

return { greeting: state.exampleReducer.greeting }

}

export const HelloWithReduxContainer = connect(

mapStateToProps,
actionCreators

)(HelloWithRedux)