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

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

    var OwnedResourcesBox = conjur.views.OwnedResourcesBox,
        Search = conjur.views.mixins.Search;

    var DashboardSearchForm = React.createClass({
        mixins: [Search],

        render: function() {
            return (
              <form id="dashboard-search"
                    className="form-inline search"
                    role="search"
                    onSubmit={this.handleSubmit}>
                <div className="form-group">
                  <input ref="input"
                         type="text"
                         className="form-control"
                         placeholder="Search Conjur"
                         value={this.props.searchText} />
                </div>
                <button type="submit" className="btn btn-default search-button">
                  Search
                </button>
              </form>
            );
        }
    });

    var DashboardFrequent = React.createClass({
        getInitialState: function() {
            return {resources: [], loaded: false};
        },

        componentWillMount: function() {
            $.get('/api/authz/' +
                  conjur.app.configuration.account +
                  '/resources?owner=' +
                  encodeURIComponent(conjur.app.userId),
                  function(data) {
                      var filteredData = data.filter(function(item) {
                          // assets of 'secret' kind are internal
                          return item.id.split(':')[1] !== 'secret';
                      });

                      this.setState({resources: filteredData, loaded: true});
                  }.bind(this));
        },

        render: function() {
            var content;

            if (this.state.loaded) {
                content = (
                  <OwnedResourcesBox resources={this.state.resources} />
                );
            } else {
                content = (
                  <span>Loading...</span>
                );
            }

            return (
              <section>
                <h3>Owned assets</h3>
                {content}
              </section>
            );
        }
    });

    this.Dashboard = React.createClass({
        render: function() {
            var AuditTable = window.AuditTable;

            return (
              <div className="dashboard">
                <div className="row">
                  <DashboardSearchForm />
                </div>
                <div className="row summary">
                  <div className="col-xs-6">
                    <DashboardFrequent />
                  </div>
                  <div className="col-xs-6 audit">
                    <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
                  </div>
                </div>
              </div>
            );
        }
    });

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