import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

import * as graphActions from '../graph.actions'

function GraphHeader(props) {
  return (
    <header>
      <div>
        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
      </div>
      <div>
        <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
      </div>
    </header>
  )
}

const mapStateToProps = (state) => ({
  // auth: state.auth,
  site: state.site,
  // isAuthenticated: state.auth.isAuthenticated,
})

const mapDispatchToProps = (dispatch) => ({
  graphActions: bindActionCreators({ ...graphActions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(GraphHeader)