import React from 'react';
import { browserHistory } from 'react-router';
import { Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import { IndexLinkContainer, LinkContainer } from 'react-router-bootstrap';

const handleLogout = () => {
  return Meteor.logout( () => browserHistory.push( '/login' ) );
};

const userName = () => {
  const user = Meteor.user();
  if ( user ) {
    const name = user && user.profile ? user.profile.name : '';
    return `${ name.first } ${ name.last }`;
  }
};

export const AuthenticatedNavigation = ( { router, location } ) => (
  <div>
    <Nav>
      <NavItem href="/" eventKey={ 1 }>Index</NavItem>
      <NavItem href="/dashboard" eventKey={ 2 }>Dashboard</NavItem>
    </Nav>
    <Nav pullRight>
      <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown">
        <MenuItem eventKey={ 3.3 } onClick={ handleLogout }>Logout</MenuItem>
      </NavDropdown>
    </Nav>
  </div>
)