/** @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;

    var RevealerBox = React.createClass({
        getInitialState: function() {
            return {revealed: false};
        },

        handleClick: function() {
            this.setState({revealed: !this.state.revealed});
        },

        render: function() {
            var valToShow = this.state.revealed ? 'SECRET HERE!' : 'Show Value';

            return (
              <div className="revealer well well-sm" onClick={this.handleClick}>
                {valToShow}
              </div>
            );
        }
    });

    var Breadcrumb = React.createClass({
        render: function() {
            return (
              <div className="b-breadcrumb">

              </div>
            );
        }
    });

    var Breadcrumbs = React.createClass({
        render: function() {
            return (
                <div className="b-breadcrumbs">
                  <Breadcrumb />
                </div>
            );
        }
    });

    var Activity = React.createClass({
        getInitialState: function() {
            var data = this.getData();

            return {
                data: data,
                options: {
                    legend: {
                        close: 'Closed',
                        sread: 'Suc. read',
                        supdate: 'Suc. update',
                        fread: 'Failed read',
                        fupdate: 'Failed update'
                    },
                    axis: {
                        y: {
                            label: 'Value'
                        }
                    }
                }
            };
        },

        getData: function() {
            return [];
        },

        render: function() {
            return (
              <div className="b-variable-activity">
                <h2>Activity</h2>
                <div className="b-variable-activity__graph">
                  <Chart options={this.state.options}
                         data={this.state.data} />
                </div>
              </div>
            );
        }
    });

    var Updaters = React.createClass({
        render: function() {
            return (
              <div className="b-variable-updaters">
                <h2>Updaters</h2>
              </div>
            );
        }
    });

    var Fetchers = React.createClass({
        render: function() {
            return (
              <div className="b-variable-fetchers">
                <h2>Fetchers</h2>
              </div>
            );
        }
    });

    var Updates = React.createClass({
        render: function() {
            return (
              <div className="b-variable-updates">
                <h2>Updates</h2>
              </div>
            );
        }
    });

    var Warnings = React.createClass({
        render: function() {
            return (
              <div className="b-variable-warnings">
                <h2>Warnings</h2>
              </div>
            );
        }
    });

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

        render: function() {
            var updaters = this.props.data.updaters.map(function(member) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={member} />
                  </li>
                );
            });

            var fetchers = this.props.data.fetchers.map(function(member) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={member} />
                  </li>
                );
            });

            var resourceId = [
                conjur.app.configuration.account,
                'variable',
                this.props.data.variable.id
            ].join(':');

            var overviewTab = (
              <TabPane key="overview" tab="Overview">
                <dl className="dl-horizontal pull-left">
                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.data.variable.ownerid} /></dd>

                  <dt>Created by</dt>
                  <dd><RoleLink id={this.props.data.variable.userid} /></dd>

                  <dt>MIME type</dt>
                  <dd>{this.props.data.variable.mime_type}</dd>

                  <dt>Kind</dt>
                  <dd>{this.props.data.variable.kind}</dd>

                  <dt>Versions</dt>
                  <dd>{this.props.data.variable.version_count}</dd>
                </dl>
                <div className="pull-right">
                  <RevealerBox variable={this.props.data.variable} />
                </div>
              </TabPane>
            );

            var updatersTab = (
              <TabPane key="updaters" tab={conjur.utils.getTabname('Updaters', updaters)}>
                <ul className="list-group">
                  {updaters}
                </ul>
              </TabPane>
            );

            var fetchersTab = (
              <TabPane key="fetchers" tab={conjur.utils.getTabname('Fetchers', fetchers)}>
                <ul className="list-group">
                  {fetchers}
                </ul>
              </TabPane>
            );

            var annotationsTab = this.annotationsTab();

            var auditTab = (
              <TabPane key="audit" tab="Recent Activity">
                <div className="audit auditHost">
                  <AuditBox resources={[resourceId]} tabview={true}/>
                </div>
              </TabPane>
            );

            var tabs = _.compact([
                overviewTab,
                updatersTab,
                fetchersTab,
                annotationsTab,
                auditTab
            ]);

                // <Breadcrumbs />
                // <hr />
                // <Activity />
                // <hr />
                // <Updaters />
                // <hr />
                // <Fetchers />
                // <hr />
                // <Updates />
                // <hr />
                // <Warnings />
                // <hr />
                // <br />
                // <br />
                // <br />
                // <br />

            return (
              <div className="variable">
                <h2>Variable {this.props.data.variable.id}</h2>
                <TabbedArea defaultActiveKey="overview">
                  {tabs}
                </TabbedArea>
              </div>
            );
        }
    });

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