import { connect } from 'refnux'
import Link from 'next/link'

import withRefnux from '../helpers/withRefnux'
import getInitialState from '../store/getInitialState'

// actions
import counterIncrement from '../store/counterIncrement'
import setTitle from '../store/setTitle'

const Page1 = connect(
  (state, dispatch) =>
    <div>
      <h3>{state.title}</h3>
      <p>Current state: {JSON.stringify(state, null, 2)}</p>
      <button onClick={() => dispatch(counterIncrement)} >Increment</button>
      <Link href='/page2'><button>go to page 2</button></Link>
    </div>
)

Page1.getInitialProps = async function (context) {
  const {store} = context
  // dispatch actions to store to set it up for this page / route
  store.dispatch(setTitle('Page 1'))
  return {} // we have a store, we don't need props!
}

export default withRefnux(getInitialState, Page1)