var React = require('react');

import {filter, take, map} from 'lodash';

var defaultNumberOfElements = 3;

var AuditEntry = require('../audit/entry'),
    ResourceLink = require('./resource_link'),
    Time = require('./time'),
    Refresh = require('../refresh/refresh');

const getAuditEntry = e => <AuditEntry {...e} />;

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

    statics: {
        updates(audit, isLoading) {
            var filterFn = function(e) {
                return (
                    e.action === 'check' && e.privilege === 'update' &&
                        !(e.hasOwnProperty('error') ||
                          e.allowed === false)
                );
            };

            var getItem = function(e) {
                var user = [
                    (<Time timestamp={e.timestamp} relative="time from now" />),
                    (<ResourceLink id={e.user} />)
                ];

                if (e.user !== e.acting_as) {
                    user.push(' acting as ');
                    user.push(<ResourceLink id={e.acting_as} />);
                }

                return user;
            };

            return (
                <FoldableAuditSection audit={audit} title="Updates"
                                      filter={filterFn} getItem={getItem}
                                      openMsg="See full updates history"
                                      isLoading={isLoading || false} />
            );
        },

        warnings(audit, isLoading) {
            var filterFn = function(e) {
                return (
                    e.hasOwnProperty('error') || e.allowed === false
                );
            };

            return (
              <FoldableAuditSection audit={audit} title="Warnings"
                                    filter={filterFn} getItem={getAuditEntry}
                                    openMsg="See full warnings history"
                                    isLoading={isLoading || false} />
            );
        },

        changes(audit, isLoading) {
            var filterFn = function(e) {
                if (e.action === 'check') {
                    return false;
                }

                if (e.kind === 'audit' || e.kind === 'annotation') {
                    return false;
                }

                // anything else is permission change
                return true;
            };

            return (
              <FoldableAuditSection audit={audit} title="Recent permission model changes"
                                    filter={filterFn} getItem={getAuditEntry}
                                    openMsg="See full history of permission model changes"
                                    isLoading={isLoading || false} />
            );
        }
    },

    propTypes: {
        audit: React.PropTypes.arrayOf(React.PropTypes.object),
        filter: React.PropTypes.func,
        getItem: React.PropTypes.func,
        howMuch: React.PropTypes.number,
        title: React.PropTypes.string,
        openMsg: React.PropTypes.string,
        isLoading: React.PropTypes.bool
    },

    defaultFilter(e) {
        return typeof e === 'object';
    },

    defaultGetItem(e) {
        return e.id;
    },

    getDefaultProps() {
        return {
            audit: [],
            filter: this.defaultFilter,
            getItem: this.defaultGetItem,
            howMuch: defaultNumberOfElements,
            title: 'Audit Section',
            openMsg: 'See full history',
            isLoading: false
        };
    },

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

    handleClick(e) {
        e.preventDefault();

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

    reverseChronology(a, b) {
        if (a.timestamp < b.timestamp) {
            return 1;
        } else if (a.timestamp > b.timestamp) {
            return -1;
        } else {
            return 0;
        }
    },

    getItems() {
        var items = filter(this.props.audit,
                             this.props.filter)
                .sort(this.reverseChronology),
            className = [
                'b-audit-section__item',
                'list-group-item',
                'list-group-item-noborder'
            ].join(' ');

        if (!this.state.showAll) {
            items = take(items, this.props.howMuch);
        }

        return map(items, function(e) {
            return (
              <li className={className}
                  key={'audit-entry-' + e.id}>
                {this.props.getItem(e)}
              </li>
            );
        }.bind(this));
    },

    render() {
        var items = this.getItems(),
            msg = this.state.showAll ?
                'Show only top ' + (this.props.howMuch) :
                this.props.openMsg,
            empty = items.length === 0,
            lessThan = items.length < (this.props.howMuch),
            body = [
              <h2 key="title">
                {this.props.title}<Refresh show={this.props.isLoading} />
              </h2>
            ];

        if (!empty) {
            body.push(
              <ul className="b-audit-section__list list-unstyled list-group"
                  key="list">
                {items}
              </ul>
            );
        } else {
            body.push(
              <p key="info">There is no history records available</p>
            );
        }

        if (!lessThan) {
            body.push(
              <div className="b-audit-section__toggle"
                   key="toggle">
                <a href="#" onClick={this.handleClick}>{msg}</a>
              </div>
            );
        }

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

export default FoldableAuditSection;