import React, { Component } from 'react'
import { withRouter } from 'next/router'
import { connect } from 'react-redux'
import { doLogout } from '../redux/actions/userAct'
import Link from 'next/link'
import getUrl from '../util/getUrl'
import mapUser from '../util/mapUser'

const NavLink = ({ children, href, active }) => {
  const activeClass = active ? ' active' : ''
  return (
    <Link href={href} as={getUrl(href)}>
      <a className={activeClass}>{children}</a>
    </Link>
  )
}
const navItems = [['/', 'Home'], ['/new', 'New Doc'], ['/settings', 'Settings']]

class Header extends Component {
  state = {
    open: false,
  }
  hideNav = () => this.setState({ open: false })
  toggleNav = () =>
    this.setState({
      open: !this.state.open,
    })
  isActive = url => getUrl(this.props.router.pathname) === getUrl(url)
  logout = e => {
    e.preventDefault()
    this.hideNav()
    doLogout()
  }

  render() {
    const expandClass = this.state.open ? ' active' : ''
    const { user } = this.props
    return (
      <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <NavLink href="/">
            <h3 onClick={this.hideNav}>MYKB</h3>
          </NavLink>
        </div>

        {!user.email
          ? null
          : [
              <div
                className={'navbar-burger ' + expandClass}
                onClick={this.toggleNav}
                key="burger"
              >
                <div />
                <div />
                <div />
              </div>,
              <div className={'navbar-items' + expandClass} key="items">
                {navItems.map(item => (
                  <NavLink
                    key={item[0]}
                    href={item[0]}
                    active={this.isActive(item[0])}
                  >
                    <p className="item" onClick={this.hideNav}>
                      {item[1]}
                    </p>
                  </NavLink>
                ))}
                <a href="/logout" onClick={this.logout}>
                  <p className="item">Logout</p>
                </a>
              </div>,
            ]}
      </nav>
    )
  }
}
export default withRouter(connect(mapUser)(Header))