/** @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,
        RoleLink = conjur.views.RoleLink,
        AuditBox = window.AuditBox;

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

        render: function() {
            var policy = this.props.data.policy,
                id = policy.id.split(':')[2];

            //TODO: policy loader
            //TODO in CLI: why not save text of policy as an annotation?
            var overviewTab = (
              <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal">
                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.data.owner}/></dd>
                </dl>
              </TabPane>
            );

            var permissionsTab = this.permissionsTab(policy.id),
                membershipsTab = this.membershipsTab(policy.id),
                annotationsTab = this.annotationsTab(),
                ownedTab = this.ownedTab();

            var auditTab = (
              <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditGroup">
                  <AuditBox roles={[policy.id]} tabview={true} />
                </div>
              </TabPane>
            );

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

            return (
              <div className="policy">
                <h2>Policy {id}</h2>
                <TabbedArea defaultActiveKey="overview">
                  {tabs}
                </TabbedArea>
              </div>
            );
        }
    });

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