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

import actions from 'app/actions'
import PlayButton from 'app/views/editor/align/components/player/playButton.component'

import './nav.css'

function Header(props) {
  if (!props.router.location) return null
  if (props.router.location.pathname.match("/viewer")) {
    return null
  }
  if (props.router.location.pathname.match("/editor")) {
    const episode_id = props.router.location.pathname.split('/')[1]
    return (
      <header>
        <div>
          <PlayButton playing={props.playing} />
          <Link to="/">Home</Link>
        </div>
        <div>
          <Link to={`/editor/${episode_id}/`}>Overview</Link>
          <Link to={`/editor/${episode_id}/timeline/`}>Timeline</Link>
          <Link to={`/editor/${episode_id}/transcript/`}>Transcript</Link>
          <Link to={`/editor/${episode_id}/media/`}>Media</Link>
          <Link to={`/editor/${episode_id}/viewer/`}>Viewer</Link>
        </div>
      </header>
    )
  }
  return (
    <header>
      <div>
        <PlayButton playing={props.playing} />
        {props.router.location.pathname !== '/' && (
          <Link to="/">Home</Link>
        )}
      </div>
      <div>
        <span className='salutation'>
          Hi {props.currentUser.username}
        </span>
        {props.currentUser.is_admin && <Link to="/users/">Users</Link>}
        <a href="#" onClick={actions.auth.logout}>
          Logout
        </a>
      </div>
    </header>
  )
}

const mapStateToProps = (state) => ({
  currentUser: state.auth.user,
  site: state.site,
  router: state.router,
  playing: state.audio.playing,
})

export default connect(mapStateToProps)(React.memo(Header))