import React, { Component } from 'react';
import {auth} from 'utils/auth';
import {Link, withRouter} from 'react-router';
import {Button} from 'components';

export class Navbar extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  logout (){
    auth.logout();
    this.props.router.push('/');
  }
  handleClick (){

  }
	render(){
    if(auth.loggedIn()){
      var authbutton = <li><Link to="/"><Button handleClick={this.logout} className="btn btn-outline btn-custom" text="Logout"/></Link></li>; 
    }
    else{
      var authbutton = <li><Link to="#"><Button handleClick={this.handleClick} className="btn btn-outline btn-custom" text="Login"/></Link></li>;
    }
		return (
    <div className='navbar navbar-inverse navbar-static-top'>
      <div className='container-nav-bar'>
        <div className='container'>
          <a className='navbar-brand col-sm-5' href='#' >
            <img className='img-responsive center-block' src='/images/CyberEye_Logo.png' />
          </a>
          <h1 className='vlab-heading col-sm-5'><span style={{color: '#1A3141'}}>Virtual&nbsp;</span><span style={{color: '#FF6F00'}}>Lab</span></h1>
          <div className="collapse navbar-collapse">
          <ul className="nav navbar-nav navbar-right">
                {authbutton}
          </ul>
        </div>
        </div>
      </div>
    </div>
		);
	}

}

export default withRouter(Navbar);
// <p className='col-sm-offset-2  col-sm-1 text-right' style={{padding: '0'}}>Menu</p>
// <button type='button' className='col-sm-1 pull-right navbar-toggle hidden-xs' data-toggle='collapse' data-target='.navbar-collapse'>
//             <span className='icon-bar'></span>
//             <span className='icon-bar'></span>
//             <span className='icon-bar'></span>
//           </button>
