/** @jsx React.DOM */
/* global conjur, _, React, ReactBootstrap */

(function(conjur, _, React, ReactBootstrap) {
    'use strict';

    var TabbedArea = ReactBootstrap.TabbedArea,
        TabPane = ReactBootstrap.TabPane,
        Tab = conjur.views.mixins.Tab,
        AuditBox = window.AuditBox,
        RoleLink = conjur.views.RoleLink;

    var PubkeyItem = React.createClass({
        render: function() {
            return (
              <div className="b-pubkey">
                <div className="b-pubkey__logo">
                  <span className="badge">{this.props.pubkey[0]}</span>
                </div>
                <ul className="b-pubkey__list list-unstyled">
                  <li className="b-pubkey__name">
                    {this.props.pubkey[2]}
                  </li>
                  <li className="b-pubkey__fingerprint">
                    {/* TODO: key fingerprint */}
                  </li>
                  <li className="b-pubkey__info">
                    {/* TODO: When added, when last time used */}
                  </li>
                </ul>
                <div className="b-pubkeys__actions">
                  {/* TODO: Action buttons */}
                </div>
              </div>
            );
        }
    });

    var PubkeysList = React.createClass({
        render: function() {
            var login = this.props.login;

            var pubkeysList = this.props.pubkeys.map(function(k, idx, coll) {
                var tokens = k.split(' ');

                console.log(arguments);

                var className = 'b-pubkeys__item list-group-item list-group-item-noborder';

                if (idx + 1 !== coll.length) {
                    className = className + ' b-pubkeys__item--headline';
                }

                return (
                  <li className={className}>
                    <PubkeyItem pubkey={tokens} />
                  </li>
                );
            });

            return (
              <div className="b-pubkeys">
                <PubkeysHelp>
                  This is list of SSH public keys associated with user {login}.
                </PubkeysHelp>
                <ul className="b-pubkeys__list">
                  {pubkeysList}
                </ul>
              </div>
            );
        }
    });

    var PubkeysHelp = React.createClass({
        render: function() {
            var ret;

            if (React.Children.count(this.props.children) > 0) {
                ret = (
                  <p className="b-pubkeys__help">
                    {this.props.children}
                  </p>
                );
            } else {
                var login = this.props.login;

                ret = (
                  <p className="b-pubkeys__help">
                    User {login} have not any pubkey. Use follow command to create one:
                    <pre>$ conjur pubkeys add {login} @id_{login}.pub</pre>
                  </p>
                );
            }

            return ret;
        }
    });

    var PubkeysTabContent = React.createClass({
        render: function() {
            var body;

            if (this.props.pubkeys.length > 0) {
                body = (
                  <PubkeysList login={this.props.login} pubkeys={this.props.pubkeys} />
                );
            } else {
                body = (
                  <div className="b-pubkeys">
                    <PubkeysHelp login={this.props.login} />
                  </div>
                );
            }

            return body;
        }
    });

    this.User = React.createClass({
        mixins: [Tab],

        render: function() {
            var user = this.props.data.user;

            // TODO: refactor
            // TODO: show public keys
            // TODO: actions menu (e.g. 'upload public key', 'add annotation')
            // TODO: memberships panel
            var overviewTab = (
              <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Created by</dt>
                  <dd><RoleLink id={user.userid}/></dd>
                  <dt>Owner</dt>
                  <dd><RoleLink id={user.ownerid}/></dd>
                  <dt>Uidnumber</dt>
                  <dd>{user.uidnumber}</dd>
                </dl>
              </TabPane>
            );

            var auditTab = (
              <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditUser">
                  <AuditBox roles={[user.roleid]}
                            resources={[user.resource_identifier]}
                            tabview={true} />
                </div>
              </TabPane>
            );

            var pubkeysTab = (
              <TabPane key="pubkeys"
                       tab={conjur.utils.getTabname('Public Keys', this.props.data.pubkeys)}>
                <PubkeysTabContent login={user.login} pubkeys={this.props.data.pubkeys} />
              </TabPane>
            );

            var permissionsTab = this.permissionsTab(user.roleid);
            var membershipsTab = this.membershipsTab(user.roleid);
            var annotationsTab = this.annotationsTab();
            var ownedTab = this.ownedTab();

            var tabs = _.compact([
                overviewTab,
                ownedTab,
                membershipsTab,
                permissionsTab,
                annotationsTab,
                pubkeysTab,
                auditTab
            ]);

            return (
              <div className="user">
                <h2>User {user.login}</h2>
                <TabbedArea defaultActiveKey="overview">
                  {tabs}
                </TabbedArea>
              </div>
            );
          }
    });

}).bind(conjur.views)
(
    conjur,
    _,
    React,
    ReactBootstrap
);