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

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

    var RoleLink = conjur.views.RoleLink,
        AuditBox = window.AuditBox,
        Breadcrumbs = conjur.views.Breadcrumbs,
        Chart = conjur.views.Chart,
        ChartHelperMixin = conjur.views.ChartHelperMixin,
        AnnotationsBox = conjur.views.AnnotationsBox,
        FoldableAuditSection = conjur.views.FoldableAuditSection;

    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 Activity = React.createClass({
        mixins: [ChartHelperMixin],

        getDefaultProps: function() {
            return {
                options: {
                    legend: {
                        sread: 'Successful reads',
                        supdate: 'Successful updates',
                        fread: 'Failed reads',
                        fupdate: 'Failed updates'
                    },
                    axis: {
                        y: {
                            label: 'Value'
                        }
                    }
                }
            };
        },

        getDefaultItem: function() {
            return {
                sread: 0,
                supdate: 0,
                fread: 0,
                fupdate: 0
            };
        },

        getEventType: function(e) {
            if (e.action === 'check') {
                if (e.hasOwnProperty('error') || e.allowed === false) {
                    if (e.privilege === 'execute') {
                        return 'fread';
                    } else if (e.privilege === 'update') {
                        return 'fupdate';
                    }
                }

                if (!e.hasOwnProperty('error') && e.allowed !== false) {
                    if (e.privilege === 'execute') {
                        return 'sread';
                    } else if (e.privilege === 'update') {
                        return 'supdate';
                    }
                }
            }

            return null;
        },

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

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

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

        handleClick: function(e) {
            e.preventDefault();

            this.setState({showAll: !this.state.showAll});
        },

        getItems: function() {
            var items = this.props.data || [];

            if (!this.state.showAll) {
                items = _.first(items, 5);
            }

            return _.map(items, function(e) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={e} />
                  </li>
                );
            });
        },

        render: function() {
            var items = this.getItems(),
                msg = this.state.showAll ? 'Show top 5' : 'See all',
                empty = items.length === 0,
                lessThan5 = items.length < 5,
                body = [(<h2>Updaters</h2>)];

            if (!empty) {
                body.push(
                  <ul className="b-variable-updaters__list list-unstyled list-group">
                    {items}
                  </ul>
                );
            } else {
                body.push(
                  <p>There is not any updaters</p>
                );
            }

            if (!lessThan5) {
                body.push(
                  <div className="b-variable-updaters__toggle">
                    <a href="#" onClick={this.handleClick}>{msg}</a>
                  </div>
                );
            }

            return (
              <div className="b-variable-updaters">
                {body}
              </div>
            );
        }
    });

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

        handleClick: function(e) {
            e.preventDefault();

            this.setState({showAll: !this.state.showAll});
        },

        getItems: function() {
            var items = this.props.data || [];

            if (!this.state.showAll) {
                items = _.first(items, 5);
            }

            return _.map(items, function(e) {
                return (
                  <li className="list-group-item list-group-item-noborder">
                    <RoleLink id={e} />
                  </li>
                );
            });
        },

        render: function() {
            var items = this.getItems(),
                msg = this.state.showAll ? 'Show top 5' : 'See all',
                empty = items.length === 0,
                lessThan5 = items.length < 5,
                body = [(<h2>Fetchers</h2>)];

            if (!empty) {
                body.push(
                  <ul className="b-variable-fetchers__list list-unstyled list-group">
                    {items}
                  </ul>
                );
            } else {
                body.push(
                  <p>There is not any fetchers</p>
                );
            }

            if (!lessThan5) {
                body.push(
                  <div className="b-variable-fetchers__toggle">
                    <a href="#" onClick={this.handleClick}>{msg}</a>
                  </div>
                );
            }

            return (
              <div className="b-variable-fetchers">
                {body}
              </div>
            );
        }
    });


    var Details = React.createClass({
        render: function() {
            // <RevealerBox variable={this.props.data.variable} />

            return (
              <div className="b-variable-details">
                <h2>Details</h2>
                <dl className="dl-horizontal">
                  <dt>Owner</dt>
                  <dd><RoleLink id={this.props.data.owner} /></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>
            );
        }
    });

    this.Variable = React.createClass({
        render: function() {
            var resourceId = [
                conjur.app.configuration.account,
                'variable',
                this.props.data.variable.id
            ].join(':');

            var elems = [
                {url: '/ui/variables', text: 'Variables'},
                {url: '', text: this.props.data.variable.id},
                {url: '', text: '(owned by ' + this.props.data.variable.ownerid + ')'}
            ];

            return (
              <div className="b-variable">
                <Breadcrumbs elems={elems} />
                <hr />
                <Activity audit={this.props.data.audit} />
                <hr />
                <div className="row">
                  <div className="col-md-6">
                    <Updaters data={this.props.data.updaters} />
                  </div>
                  <div className="col-md-6">
                    <Fetchers data={this.props.data.fetchers} />
                  </div>
                </div>
                <hr />
                {FoldableAuditSection.updates(this.props.data.audit)}
                <hr />
                {FoldableAuditSection.warnings(this.props.data.audit)}
                <hr />
                <div className="row">
                  <div className="col-md-6">
                    <Details data={this.props.data} />
                  </div>
                  <div className="col-md-6">
                    <h2>Annotations</h2>
                    <AnnotationsBox annotations={this.props.data.annotations} />
                  </div>
                </div>
                <hr />
                <AuditBox resources={[resourceId]} />
              </div>
            );
        }
    });

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