var React = require('react');
var reactCreateClass = require('create-react-class');

var NavBar = reactCreateClass({
  render: function () {
    var that = this;

    var signedInAs = function () {
      if (that.props.loggedIn === true) {
        return (
          <p className="navbar-text">
            Signed in as <b>{that.props.user.full_name}</b>
          </p>
        );
      }
    };

    var dashboard = function () {
      if (that.props.loggedIn === true) {
        return (
          <li>
            <a target="_blank" href="https://wakatime.com/dashboard">
              <i className="fa fa-fw fa-tachometer"></i>
              Dashboard
            </a>
          </li>
        );
      }
    };

    var customRules = function () {
      if (that.props.loggedIn === true) {
        return (
          <li>
            <a target="_blank" href="https://wakatime.com/settings/rules">
              <i className="fa fa-fw fa-filter"></i>
              Custom Rules
            </a>
          </li>
        );
      }
    };

    return (
      <nav className="navbar navbar-default" role="navigation">
        <div className="container-fluid">
          <div className="navbar-header">
            <button
              type="button"
              className="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
            >
              <span className="sr-only">Toggle navigation</span>
              <i className="fa fa-fw fa-cogs"></i>
            </button>
            <a target="_blank" className="navbar-brand" href="https://wakatime.com">
              WakaTime
              <img src="graphics/wakatime-logo-48.png" />
            </a>
          </div>
          <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            {signedInAs()}
            <ul className="nav navbar-nav">
              {customRules()}
              {dashboard()}
              <li className="dropdown">
                <a
                  href="#"
                  className="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-expanded="false"
                >
                  <i className="fa fa-fw fa-info"></i>
                  About
                  <span className="caret"></span>
                </a>
                <ul className="dropdown-menu" role="menu">
                  <li>
                    <a target="_blank" href="https://github.com/wakatime/chrome-wakatime/issues">
                      <i className="fa fa-fw fa-bug"></i>
                      Report an Issue
                    </a>
                  </li>
                  <li>
                    <a target="_blank" href="https://github.com/wakatime/chrome-wakatime">
                      <i className="fa fa-fw fa-github"></i>
                      View on GitHub
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  },
});

module.exports = NavBar;