var React = require('react'),
    cx = require('react/lib/cx');

import {filter, pluck, includes} from 'lodash';

var PermissionsTable = require('./permissions_table');

var PermissionsSummary = React.createClass({
    displayName: 'PermissionsSummary',

    render() {
        var expand = '';

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

        return (
          <div>
            <span>
              {this.props.length} permissions
            </span>
            {expand}
          </div>
        );
    }
});

export default React.createClass({
    displayName: 'Permissions',

    getDefaultProps() {
        return {
            resources: [],
            roles: []
        };
    },

    getInitialState() {
        return {
            expand: false
        };
    },

    expand() {
        this.setState({expand: true});
    },

    collapse() {
        this.setState({expand: false});
    },

    setPermissions(_resources) {
        /**
         * Filter out owned resources.
         * Filter out permissions on resources which are not held by the current role.
         */
        var resources;

        if (this.props.owned) {
            var ownedIds = pluck(this.props.owned, 'id');

            resources = filter(_resources, function(r) {
                return !includes(ownedIds, r.id);
            });
        } else {
            resources = _resources;
        }

        var roleSet = {};

        this.props.roles.forEach(function(r) {
            roleSet[r] = r;
        });

        var cleanResources = filter(resources, function(item) {
            // assets of 'secret' kind are internal
            return item.id.split(':')[1] !== 'secret';
        });

        cleanResources.forEach(function(resource) {
            var permissions = resource.permissions,
                hasPermissions = [];

            permissions.forEach(function(permission) {
                if (roleSet.hasOwnProperty(permission.role)) {
                    hasPermissions.push(permission);
                }
            });

            resource.permissions = hasPermissions;
        });

        return cleanResources;
    },

    render() {
        var resources = this.setPermissions(this.props.resources);

        var content;

        if (this.state.expand || this.props.tabview) {
            content = (
              <PermissionsTable resources={resources}
                                hideHandler={this.collapse}
                                tabview={this.props.tabview} />
            );
        } else {
            content = (
              <PermissionsSummary length={this.state.resources.length}
                                  expandHandler={this.expand} />
            );
        }

        var classes = cx({
            permissions: true,
            loading: false
        });

        var permissionsheader = this.props.tabview ? '' : (<h3>Permissions held</h3>);

        return (
          <section className={classes}>
           {permissionsheader}
           <div id="permissionDetails">
             {content}
           </div>
         </section>
        );
    }
});