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

import { Loader } from 'app/common'
import { capitalize } from 'app/utils'

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

function PageHeader(props) {
  return (
    <header>
      <div>
        <Link to={props.graph ? "/" + props.graph.path : "/"} className="logo arrow">{"◁"}</Link>
        <b>{props.site.siteTitle}</b>
        {props.building && (
          <div className='building'>
            <div className='loader'>
              <Loader />
            </div>
            {capitalize(props.building)}ing...
          </div>
        )}
      </div>
      <div>
        <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
        <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
        <button onClick={() => props.pageActions.togglePopups()}>Toggle popups</button>
        <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
        <button onClick={() => props.graphActions.viewPage(props.graph, props.router.location.pathname)}>View page</button>
      </div>
    </header>
  )
}

const mapStateToProps = (state) => ({
  // auth: state.auth,
  site: state.site,
  graph: state.graph.show.res,
  page: state.page.show.res,
  building: state.graph.editor.building,
  router: state.router,
  // isAuthenticated: state.auth.isAuthenticated,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(PageHeader)