var React = require('react');

import {take} from 'lodash';

var RoleLink = require('../generic/role_link'),
    Refresh = require('../refresh/refresh');

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

    propTypes: {
        data: React.PropTypes.array,
        isLoading: React.PropTypes.bool
    },

    getDefaultProps() {
        return {
            data: [],
            isLoading: false
        };
    },

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

    handleClick(e) {
        e.preventDefault();

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

    getItems() {
        return this.props.data.map((e) => {
            return (
              <li className="list-group-item list-group-item-noborder">
                <RoleLink id={e} />
              </li>
            );
        });
    },

    render() {
        var items = this.getItems(),
            itemsToDisplay = this.state.showAll ? items : take(items, 5),
            msg = this.state.showAll ? 'Show top 5' : 'See all',
            empty = items.length === 0,
            lessThan5 = items.length <= 5,
            body = [(<h2>Updaters<Refresh show={this.props.isLoading} /></h2>)];

        if (!empty) {
            body.push(
              <ul className="b-host-updaters__list list-unstyled list-group">
                {itemsToDisplay}
              </ul>
            );
        } else {
            body.push(
              <p>There are no updaters</p>
            );
        }

        if (!lessThan5) {
            body.push(
              <div className="b-host-updaters__toggle">
                <a href="#" onClick={this.handleClick}>{msg}</a>
              </div>
            );
        }

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