'use strict';

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import Collapse from 'react-bootstrap/lib/Collapse';
import _ from 'lodash';
export var CollapsibleList =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(CollapsibleList, _React$Component);

  function CollapsibleList(props, context) {
    var _this;

    _this = _React$Component.call(this, props, context) || this;
    _this.state = {
      isCollapsed: true
    };
    return _this;
  }

  var _proto = CollapsibleList.prototype;

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

  _proto.render = function render() {
    var head = _.take(this.props.children, this.props.visibleItems);

    var tail = _.takeRight(this.props.children, this.props.children.length - this.props.visibleItems);

    var showToggle = tail.length > 0;
    var toggle;

    if (showToggle) {
      toggle = React.createElement("span", {
        className: "toggle-list",
        onClick: this.handleToggleClick.bind(this)
      }, "...");
    }

    return React.createElement("div", {
      className: "collapsible-list",
      "data-test-automation-id": this.props.testAutomationId
    }, React.createElement("div", {
      className: "head-wrapper"
    }, head), toggle, React.createElement(Collapse, {
      in: !this.state.isCollapsed
    }, React.createElement("div", null, tail)));
  };

  return CollapsibleList;
}(React.Component);

_defineProperty(CollapsibleList, "propTypes", {
  testAutomationId: PropTypes.string,
  visibleItems: PropTypes.number,
  children: PropTypes.node
});

_defineProperty(CollapsibleList, "defaultProps", {
  testAutomationId: 'collapsibleList',
  visibleItems: 1,
  children: null
});