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


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

    var ResourceLink = conjur.views.ResourceLink,
        RoleLink = conjur.views.RoleLink;

    var SearchGroupTitle = React.createClass({
        render: function() {
            return (
              <span>{this.title()}</span>
            );
        },

        title: function() {
            var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');

            words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);

            return (
                words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
            );
        }
    });

    var SearchGroupHeading = React.createClass({
        render: function() {
            var targetId = '#search-collapse-' + this.props.data.kind;

            return (
              <div className="panel-heading">
                <h4 className="panel-title">
                  <a data-toggle="collapse"
                     data-target={targetId}
                     className={'group-heading' + this.props.data.kind}>
                    <SearchGroupTitle data={this.props.data} />
                  </a>
                </h4>
              </div>
            );
        },

        title: function() {
            var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');

            words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);

            return (
                words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
            );
        }
    });

    var SearchResultItem = React.createClass({
        render: function() {
            return (
              <div className="item">
                <h4>{this.titleLink()}</h4>
                <div className="details">
                  <strong> ID: </strong> <ResourceLink data={this.props.data.id}
                                                       noIcon="true" />
                  <strong> Owner: </strong> <RoleLink id={this.props.data.owner}
                                                      noIcon="true" />
                </div>
                <div className="comment">
                  {this.commentText()}
                </div>
              </div>
            );
        },

        commentText: function() {
            var annots = this.annotationsMap();

            return annots.description || '';
        },

        titleLink: function(){
            var annots = this.annotationsMap();

            return (
              <ResourceLink data={this.props.data.id} text={annots.name} />
            );
        },

        annotationsMap: function(){
            if (this._annotationsMap) {
                return this._annotationsMap;
            }

            var map = this._annotationsMap = {};

            (this.props.data.annotations || []).forEach(function(a) {
                map[a.name] = a.value;
            });

            return map;
        }
    });

    // accepts props like data: { kind:"", items:[] }
    var SearchGroup = React.createClass({
        render: function() {
            var id = 'search-group-' + this.props.data.kind;

            var items = this.props.data.items.map(function(r) {
                return (
                  <SearchResultItem data={r}/>
                );
            });

            return (
              <div id={id} className="panel panel-default search-group">
                <SearchGroupHeading data={this.props.data}/>
                <div id={'search-collapse-' + this.props.data.kind}
                     className="panel-collapse collapse in">
                  <div className="panel-body">
                    {items}
                  </div>
                </div>
              </div>
            );
        }
    });

    var SearchResults = this.SearchResults = React.createClass({
        render: function() {
            var results = this.props.data.results;

            var grouped = _.groupBy(results, function(r) {
                return r.id.split(':')[1];
            });

            // Don't care about these
            delete grouped['environment-variables'];
            delete grouped.notification;
            delete grouped.queue;

            var groups = _.map(grouped, function(items, key) {
                var data = {items: items, kind: key}; // - prevent editor barfing
                return <SearchGroup data={data}/>;
            });

            var scores = {
                'policy':   1,
                'layer':    2,
                'group':    3,
                'host':     4,
                'user':     5,
                'variable': 6,
                'key_pair': 7
            };

            groups.sort(function(a, b) {
                return (
                    (scores[a.props.data.kind] || 100) -
                        (scores[b.props.data.kind] || 100)
                );
            });

            var toc = groups.map(function(g) {
                var gid = '#search-group-' + g.props.data.kind;

                return (
                  <div className="toc-item">
                    <a href={gid}><SearchGroupTitle data={g.props.data} /></a>
                  </div>
                );
            });

            var heading = 'Found ' + this.props.data.results.length +
                    ' resources matching "' + this.props.data.search + '"';

            return (
              <div id="searchResults">
                <div className="searchResults">
                  <h3> { heading } </h3>
                  <div className="search-results-toc">
                    {toc}
                  </div>
                  <div className="search-results">
                    {groups}
                  </div>
                </div>
              </div>
            );
        }
    });

    SearchResults.search = function(search, container) {
        container = container || document.getElementById('content');

        $.get(
            conjur.app.endpoints.authz('resources', {search: search.replace('-',' ')}),
            function(results) {
                var data = {search: search, results: results};
                React.renderComponent(<SearchResults data={data}/>, container);
            }
        );
    };


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