'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import Collapse from 'react-bootstrap/lib/Collapse';
import _ from 'lodash';

export class CollapsibleList extends React.Component {
    static propTypes = {
        testAutomationId: PropTypes.string,
        visibleItems: PropTypes.number,
        children: PropTypes.node
    };

    static defaultProps = {
        testAutomationId: 'collapsibleList',
        visibleItems: 1,
        children: null
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            isCollapsed: true
        };
    }

    handleToggleClick() {
        this.setState({
            isCollapsed: !this.state.isCollapsed
        });
    }

    render() {
        let head = _.take(this.props.children, this.props.visibleItems);
        let tail = _.takeRight(
            this.props.children,
            this.props.children.length - this.props.visibleItems
        );
        let showToggle = tail.length > 0;
        let toggle;

        if (showToggle) {
            toggle = (
                <span className="toggle-list" onClick={this.handleToggleClick.bind(this)}>
                    ...
                </span>
            );
        }

        return (
            <div className="collapsible-list" data-test-automation-id={this.props.testAutomationId}>
                <div className="head-wrapper">{head}</div>
                {toggle}
                <Collapse in={!this.state.isCollapsed}>
                    <div>{tail}</div>
                </Collapse>
            </div>
        );
    }
}
