/** @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,
        AnnotationsBox = conjur.views.AnnotationsBox,
        Breadcrumbs = conjur.views.Breadcrumbs,
        RoleLink = conjur.views.RoleLink,
        Chart = conjur.views.Chart,
        ChartHelperMixin = conjur.views.ChartHelperMixin,
        FoldableAuditSection = conjur.views.FoldableAuditSection;

    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(' ');

                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">
                    There is no pubkeys registered for this user yet. Use following command to upload one from a file:
                    <pre>$ conjur pubkeys add {login} @userkeyfile.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;
        }
    });

    var Activity = React.createClass({
        mixins: [ChartHelperMixin],

        getDefaultProps: function() {
            return {
                options: {
                    legend: {
                        logins: 'Logins',
                        sudo: 'Sudo calls',
                        reads: 'Secret reads',
                        updates: 'Secret updates',
                        warnings: 'Warnings'
                    },
                    axis: {
                        y: {
                            label: 'Value'
                        }
                    }
                }
            };
        },

        getDefaultItem: function() {
            return {
                logins: 0,
                sudo: 0,
                reads: 0,
                updates: 0,
                warnings: 0
            };
        },

        getEventType: function(e) {
            if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
                if (e.action === 'sudo' && e.allowed === true) {
                    return 'sudo';

                } else if (e.action === 'login' && e.allowed === true) {
                    return 'logins';
                }
            }

            if (e.hasOwnProperty('error') || e.allowed === false) {
                return 'warnings';
            }

            if (e.action==='check' &&
                e.hasOwnProperty('allowed') &&
                e.allowed === true) {

                if (e.hasOwnProperty('role') &&
                    e.role === this.props.roleid) {

                    if (e.hasOwnProperty('resource') &&
                        e.resource.split(':')[1] === 'variable') {

                        if (e.privilege === 'update' ) {
                            return 'updates';

                        } else if (e.privilege === 'execute') {
                            return 'reads';
                        }
                    }
                }
            }

            return null;
        },

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

            return (
              <div className="b-user-activity">
                <h2>Activity</h2>
                <div className="b-user-activity__graph">
                  <Chart options={this.props.options}
                         data={data} />
                </div>
              </div>
            );
        }
    });

    var Details = React.createClass({
        render: function() {
            // TODO: refactor
            // TODO: show public keys
            // TODO: actions menu (e.g. 'upload public key', 'add annotation')
            // TODO: memberships panel
            return (
              <div className="b-user-details">
                <h2>Details</h2>
                <dl className="dl-horizontal">
                  <dt>Created by</dt>
                  <dd><RoleLink id={this.props.user.userid}/></dd>

                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.owner}/></dd>

                  <dt>Uidnumber</dt>
                  <dd>{this.props.user.uidnumber}</dd>
                </dl>
              </div>
            );
        }
    });

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

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

            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 ownedTab = this.ownedTab();

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

            var elems = [
                {url: '/ui/users', text: 'Users'},
                {url: '', text: this.props.data.user.login},
                {url: '', text: '(owned by ' + this.props.data.user.ownerid + ')'}
            ];

            return (
              <div className="b-user">
                <Breadcrumbs elems={elems} />
                <hr />
                <Activity audit={this.props.data.audit} roleid={user.roleid} />
                <hr />
                {FoldableAuditSection.warnings(this.props.data.audit)}
                <hr />
                <div className="row">
                  <div className="col-md-6">
                    <Details owner={this.props.data.owner}
                             user={user} />
                  </div>
                  <div className="col-md-6">
                    <h2>Annotations</h2>
                    <AnnotationsBox annotations={this.props.data.annotations} />
                  </div>
                </div>
                <hr />
                <h2>Other</h2>
                <TabbedArea>
                  {tabs}
                </TabbedArea>
                <hr />
                <AuditBox roles={[user.roleid]}
                          resources={[user.resource_identifier]} />
              </div>
            );
          }
    });

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