import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import _ from 'lodash';
import {CTADropdown} from './CTADropdown';
import BSButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';

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

    static defaultProps = {
        visibleAmount: 2,
        testAutomationId: 'CATContainer',
        className: null,
        children: null
    };

    render() {
        let {visibleAmount, className, testAutomationId, children, ...props} = this.props;

        let classNames = classnames(className, 'cta-toolbar');

        let head = _.take(children, visibleAmount);
        let tail = _.takeRight(children, children.length - visibleAmount);
        let showDropdown = tail.length > 0;
        let dropdown;

        if (showDropdown) {
            dropdown = <CTADropdown testAutomationId="moreActionDropdown">{tail}</CTADropdown>;
        }

        return (
            <BSButtonToolbar
                data-test-automation-id={testAutomationId}
                className={classNames}
                {...props}>
                {head}
                {dropdown}
            </BSButtonToolbar>
        );
    }
}
