import React from 'react';
import classNames from 'classnames';

import UserAvatar from './../shared/UserAvatar';
import Button from './../shared/Button';
import NavigationDropdown from './NavigationDropdown';
import OrganizationAgentsBadge from './../OrganizationAgentsBadge';

const NavigationButton = (props) => {
  let classes = classNames("btn black hover-lime focus-lime", props.className);

  return (
    <a href={props.href} className={classes}>{props.children}</a>
  );
}

NavigationButton.propTypes = {
  className: React.PropTypes.string,
  href: React.PropTypes.string,
  children: React.PropTypes.node
};

class Navigation extends React.Component {
  static propTypes = {
    organization: React.PropTypes.object,
    viewer: React.PropTypes.shape({
      user: React.PropTypes.shape({
        name: React.PropTypes.string.isRequired,
        avatar: React.PropTypes.shape({
          url: React.PropTypes.string.isRequired
        })
      }),
      organizations: React.PropTypes.shape({
        edges: React.PropTypes.array
      })
    })
  };

  render() {
    return (
      <div className="border-bottom bg-silver mb3" style={{fontSize: 13}}>
        <div className="twbs-container">
          <div className="flex flex-center">
            <img src={require('../../images/logo.svg')}  style={{height: 30}} className="mr3" />

            <NavigationDropdown className="flex flex-center">
              <div className="bold">
                <div className="truncate sm-show" style={{maxWidth: 200}}>
                  {this._organizationSelectorLabel()}
                </div>
                <div className="truncate sm-hide" style={{maxWidth: 100}}>
                  {this._organizationSelectorLabel()}
                </div>
              </div>

              {this._organizationsList()}

              <a href="/organizations/new" className="btn black hover-lime focus-lime block py2"><i className="fa fa-plus-circle"/> Create New Organization</a>
            </NavigationDropdown>

            <img src={require('../../images/seperator.svg')} style={{ height: 47 }} className="ml2" />

            {this._organizationMenu()}

            <div className="flex-grow"></div>

            <NavigationButton href={`/docs`} className="md-show">Documentation</NavigationButton>
            <NavigationButton href="mailto:support@buildkite.com" className="md-show">Support</NavigationButton>

            <NavigationDropdown className="ml2 flex flex-center" align="right" width={170}>
              <div className="flex flex-center bold">
                <UserAvatar user={this.props.viewer.user} style={{width: 30, height: 30}} className="mr1" />
                <span className="md-show">{this.props.viewer.user.name}</span>
              </div>

              <a href={`/docs`} className="btn black hover-lime focus-lime md-hide block border-bottom py2">Documentation</a>
              <a href="mailto:support@buildkite.com" className="btn black hover-lime focus-lime md-hide block border-bottom py2">Support</a>
              <a href="/user/settings" className="btn black hover-lime focus-lime block border-bottom py2">Personal Settings</a>
              <Button action="/logout" method="delete" className="black hover-lime focus-lime block py2 left-align" style={{width: "100%"}}>Logout</Button>
            </NavigationDropdown>
          </div>
        </div>
      </div>
    );
  }

  _organizationSelectorLabel() {
    if(this.props.organization) {
      return this.props.organization.name;
    } else {
      return "Organizations"
    }
  }

  _organizationsList() {
    let nodes = [];
    this.props.viewer.organizations.edges.forEach((org) => {
      // Don't show the active organization in the selector
      if(!this.props.organization || (org.node.slug != this.props.organization.slug)) {
        nodes.push(<a key={org.node.slug} href={`/${org.node.slug}`} className="btn black hover-lime focus-lime border-bottom block py2">{org.node.name}</a>);
      }
    });

    if(nodes.length > 0) {
      return nodes;
    } else {
      return <span className="block py2 px3 border-bottom gray">You have no other organizations</span>
    }
  }

  _organizationMenu() {
    var organization = this.props.organization;

    if(organization) {
      return (
        <div className="flex flex-center">
          <NavigationButton href={`/${organization.slug}`}>Projects</NavigationButton>
          <NavigationButton href={`/organizations/${organization.slug}/agents`} className="sm-show">Agents <OrganizationAgentsBadge organization={organization} className="inline-block bg-black white rounded p1 ml1 small" /></NavigationButton>
          <NavigationButton href={`/organizations/${organization.slug}/agents`} className="sm-hide">Agents</NavigationButton>
          <NavigationButton href={`/organizations/${organization.slug}/settings`}>Settings</NavigationButton>
        </div>
      )
    }
  }
}

export default Navigation;

@@ -1235,32 +1235,130 @@
 x flex-center%22%3E%0A
+            %3Cdiv className=%22border-right mr3 flex flex-row flex-center%22 style=%7B%7B height: 47 %7D%7D%3E%0A  
             %3Cimg
@@ -1396,17 +1396,16 @@
 o.svg')%7D
- 
  style=%7B
@@ -1405,34 +1405,57 @@
 style=%7B%7Bheight: 
-30
+24, width: 36, opacity: 1
 %7D%7D className=%22mr
@@ -1455,24 +1455,43 @@
 ame=%22mr3%22 /%3E
+%0A            %3C/div%3E
 %0A%0A          
@@ -2204,32 +2204,43 @@
 .svg')%7D style=%7B%7B
+ width: 12,
  height: 47 %7D%7D c

Fix logo styling