import React, { Component, PropTypes } from 'react'
import _ from 'lodash'

const MapLink = props => {
  const { show, text, href, linkClass } = props
  const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
  if (!show) {
    return null
  }

  return (
    <a { ...otherProps } href={href} className={linkClass}>
      <div className="exploreMapsIcon"></div>
      {text}
    </a>
  )
}

class Header extends Component {
  render = () => {
    const { signedIn, section } = this.props

    const activeClass = (title) => {
      let forClass = "exploreMapsButton"
      forClass += " " + title + "Maps"
      if (title == "my" && section == "mine" ||
          title == section) forClass += " active"
      return forClass
    }

    const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured"
    const mapper = section == "mapper"

    return (
      <div id="exploreMapsHeader">
        <div className="exploreMapsBar exploreElement">
          <div className="exploreMapsMenu">
            <div className="exploreMapsCenter">
              <MapLink show={signedIn && explore}
                href="/explore/mine"
                linkClass={activeClass("my")}
                data-router="true"
                text="My Maps"
              />
              <MapLink show={signedIn && explore}
                href="/explore/shared"
                linkClass={activeClass("shared")}
                data-router="true"
                text="Shared With Me"
              />
              <MapLink show={signedIn && explore}
                href="/explore/starred"
                linkClass={activeClass("starred")}
                data-router="true"
                text="Starred By Me"
              />
              <MapLink show={explore}
                href={signedIn ? "/" : "/explore/active"}
                linkClass={activeClass("active")}
                data-router="true"
                text="Global"
              />
              <MapLink show={!signedIn && explore}
                href="/explore/featured"
                linkClass={activeClass("featured")}
                data-router="true"
                text="Featured Maps"
              />

              {mapper ? (
                <div className='exploreMapsButton active mapperButton'>
                  <img className='exploreMapperImage' width='24' height='24' src={this.props.user.image} />
                  <div className='exploreMapperName'>{this.props.user.name}&rsquo;s Maps</div>
                  <div className='clearfloat'></div>
                </div>
              ) : null }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Header.propTypes = {
  signedIn: PropTypes.bool.isRequired,
  section: PropTypes.string.isRequired,
  user: PropTypes.object
}

export default Header