import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {namespaceConfig} from 'fast-redux'
import Link from 'next/link'

const DEFAULT_STATE = {build: 1}

const {actionCreator, getState: getHomepageState} = namespaceConfig('homepage', DEFAULT_STATE)

const bumpBuild = actionCreator(function bumpBuild (state, increment) {
  return {...state, build: state.build + increment}
})

const Homepage = ({ build, bumpBuild }) => (
  <div>
    <h1>Homepage</h1>
    <h3>Current build: {build}</h3>
    <p><button onClick={(e) => bumpBuild(1)}>Bump build!</button></p>
    <Link href='/about'><a>About Us</a></Link>
  </div>
)

function mapStateToProps (state) {
  return getHomepageState(state)
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({ bumpBuild }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Homepage)