import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'

/* ACTIONS */

export const ADD = 'something_clever/ADD'
export function add () {
  return { type: ADD }
}

/* REDUCER */

export const initialState = {
  count: 0
}

export function reducer (state = initialState, action) {
  switch(action.type) {
    case ADD:
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

/* COMPONENT */

const stateToProps = (state) => ({
  count: state.something_clever.count
})

class SomethingClever extends Component {
  static propTypes = {
    count: PropTypes.number,
    dispatch: PropTypes.func.isRequired
  }

  render () {
    const { count, dispatch } = this.props

    return <div className='SomethingClever'>
      <p>{count}</p>
      <button onClick={() => dispatch(add())}>+</button>
    </div>
  }
}

export default connect(stateToProps)(SomethingClever)