/** @jsx React.DOM */

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

    var knownTypes = ['user', 'group', 'layer', 'host', 'variable', 'policy'];

    var OwnedResourcesBox = this.OwnedResourcesBox = React.createClass({
        getInitialState: function() {
            return {
                filter: ''
            };
        },

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

            this.setState({filter: e.target.value});
        },

        render: function() {
            var filters = [];

            if (!this.props.resources) {
                return (
                  <span>None</span>
                );
            }

            var items = this.props.resources
                    .sort(function(a, b) {
                        // TODO: sort by kind with custom weights, by id, by creation date
                        // automatically gives sort by kind, id
                        return a.id.toLowerCase().localeCompare(b.id.toLowerCase());
                    }).map(function(resource) {
                        var kind = resource.id.split(':')[1];
                        filters.push(kind);

                        if ((this.state.filter === '')
                            || (this.state.filter != 'other' && this.state.filter === kind)
                            || (this.state.filter === 'other' && _.intersection([kind], knownTypes).length === 0)) {
                            return (
                              <li className="list-group-item list-group-item-noborder">
                                <ResourceLink data={resource} />
                              </li>
                            );
                        }

                        return '';
                    }.bind(this));

            var toggleButton = '';

            if (!this.props.tabview) {
                toggleButton = (
                  <div className="hide-all">
                    <a onClick={this.props.handler}>Hide all &laquo;</a>
                  </div>
                );
            }

            var filterSelect = '';

            if (this.props.resources.length > 9 || this.state.filter != '') {
                // TODO: sort, when done with previous TODO
                filterSelect = _.intersection(_.uniq(filters, true), knownTypes).map(function(f) {
                    return (
                        <option value={f}>{_.str.capitalize(conjur.utils.pluralize(f))}</option>
                    );
                });

                filterSelect = (
                  <div className="form-group row">
                    <div className="col-xs-3">
                      <select className="form-control" type="select" ref="filter"
                              value={this.state.filter} onChange={this.handleChange}>
                        <option value="">Show all</option>
                        {filterSelect}
                        <option value="other">Other</option>
                      </select>
                    </div>
                  </div>
                );
            }

            return (
              <div className="owned">
                {toggleButton}
                {filterSelect}
                <ul className="list-group">{items}</ul>
              </div>
            );
        }
    });

    var OwnedResourcesSummary = React.createClass({
        render: function() {
            var expand = '';

            if (this.props.length > 0) {
                expand = (
                  <span>
                    <br/>
                    <span>
                      <a onClick={this.props.handler}>Show all &raquo;</a>
                    </span>
                  </span>
                );
            }

            var message = '';

            if (this.props.length === 0) {
                message = 'none';
            } else {
                message = '' + this.props.length + ' things';
            }

            return (
              <div>
                <span>
                  {message}
                </span>
                {expand}
              </div>
            );
        }
    });

    var OwnedResources = this.OwnedResources = React.createClass({
        getInitialState: function() {
            return {
                expanded: false
            };
        },

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

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

        render: function() {
            var content = null;

            if (this.state.expanded || this.props.tabview) {
                content = (
                  <OwnedResourcesBox resources={this.props.owned}
                                     handler={this.toggle}
                                     tabview={this.props.tabview} />
                );

            } else {
                content = (
                  <OwnedResourcesSummary length={this.props.owned.length}
                                         handler={this.toggle} />
                );
            }

            var ownedheader = this.props.tabview ? '': (<h3>Owned assets</h3>);

            return (
              <section className="owned row">
                {ownedheader}
                <div id="ownedDetails" className="col-xs-6">
                  {content}
                </div>
              </section>
            );
        }
    });

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