// The primary application header.
//
// This is only shown when the user has logged into the application.
// We display a basic breadcrumb on the left, and a logout link on the right.

var AppActions = require('../actions/AppActions');
var Location = require('../stores/Location');
var React = require('react');
var ReactBootstrap = require('react-bootstrap');

var Button = ReactBootstrap.Button;
var Glyphicon = ReactBootstrap.Glyphicon;
var Nav = ReactBootstrap.Nav;
var NavItem = ReactBootstrap.NavItem;
var Navbar = ReactBootstrap.Navbar;

var Header = React.createClass({

  getInitialState: function() {
    return {
      location: Location.getLocation()
    };
  },

  componentDidMount: function() {
    Location.addNewLocationListener(this.updateLocation);
  },

  componentWillUnmount: function() {
    Location.removeNewLocationListener(this.updateLocation);
  },

  render: function() {
    var subPath = null;

    if (this.state.location.createProject) {
      subPath = <NavItem ref='createProject'> <Glyphicon glyph='menu-right' /> Create Project </NavItem>
    } else if (this.state.location.project) {
      subPath = <NavItem ref='project'> <Glyphicon glyph='menu-right' /> Project Details </NavItem>
    }

    return (
      <Navbar>
        <Nav>
          <NavItem ref='brand' onClick={this.clickBrand}>
            <strong>Helix Project Management</strong>
          </NavItem>
          {subPath}
        </Nav>
        <Nav right style={{"marginRight": '10px'}}>
          <Button bsStyle="link" onClick={this.handleLogOut}>Log Out</Button>
        </Nav>
      </Navbar>
    );
  },

  handleLogOut: function() {
    AppActions.logOut();
  },

  clickBrand: function() {
    AppActions.changeLocation({ projectList: 'my' });
  },

  updateLocation: function() {
    this.setState({ location: Location.getLocation() });
  }
});

module.exports = Header;