import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';

import { logout } from '../../actions/auth';
import { toggleSidebar } from '../../actions/sidebar';
import appConfig from '../../appConfig';

function dispatchActionToProps(dispatch) {
  return {
    logout: bindActionCreators(logout, dispatch),
    toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
  };
}

function mapStateToProps(state) {
  return {
    sidebar: state.sidebar,
  };
}

export class Header extends React.Component {
  constructor() {
    super();
    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.onLogout = this.onLogout.bind(this);
  }

  toggleNavbar() {
    this.props.toggleSidebar();
  }

  onLogout() {
    this.props.logout();
  }

  render() {
    const navbarClassName = (this.props.sidebar.isSidebarOpen) ? 'open' : 'close';
    return (
      <div>
        <header className="app-header">
          <span className={`navigation-toggle ${navbarClassName}`}>
            <i className={`icon-dot-3 ${navbarClassName}`} onClick={this.toggleNavbar} />
          </span>
          <div className="logo-image">Dakiya</div>
        </header>
        <nav className={`links-container ${navbarClassName}`}>
          <ul>
            <li key="home">
              <Link to={appConfig.homePage} activeClassName="active">List Parcels</Link>
            </li>
            <li key="about">
              <Link to={appConfig.addParcelPage} activeClassName="active">Add Parcel</Link>
            </li>
            <li className="bottom" onClick={this.onLogout}>
              <a href="/">Logout</a>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

Header.propTypes = {
  logout: PropTypes.func,
  toggleSidebar: PropTypes.func,
  sidebar: PropTypes.object,
};

export default connect(mapStateToProps, dispatchActionToProps)(Header);
