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)