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 { Button } from './Button';
import { Block } from './Block';
import { Icon } from './Icon';
import { Row } from './Row';
import Col from 'react-bootstrap/lib/Col';
export var CollapsibleToolbar =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(CollapsibleToolbar, _React$Component);

  function CollapsibleToolbar(props, context) {
    var _this;

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

  var _proto = CollapsibleToolbar.prototype;

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

  _proto.getMoreButton = function getMoreButton() {
    var isCollapsed = this.state.isCollapsed;
    var _this$props = this.props,
        moreButtonText = _this$props.moreButtonText,
        moreButtonLabel = _this$props.moreButtonLabel;
    var iconName = isCollapsed ? 'chevron-down-small' : 'chevron-up-small';
    return React.createElement(Button, {
      "aria-label": moreButtonLabel,
      "aria-expanded": !isCollapsed,
      onClick: this.handleToggleClick.bind(this),
      withIcon: true,
      bsStyle: "link"
    }, moreButtonText, React.createElement(Icon, {
      name: iconName
    }));
  };

  _proto.wrapMoreButton = function wrapMoreButton(moreButton) {
    return React.createElement(Col, {
      xs: 2
    }, moreButton);
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        header = _this$props2.header,
        footer = _this$props2.footer,
        collapsibleContent = _this$props2.collapsibleContent,
        hasBodyPadding = _this$props2.hasBodyPadding,
        testAutomationId = _this$props2.testAutomationId;
    var headline = React.createElement(Row, null, header, this.wrapMoreButton(this.getMoreButton()));
    var body;

    if (hasBodyPadding) {
      body = React.createElement(Block, {
        noOffset: true
      }, React.createElement(Block, {
        condensed: true
      }), collapsibleContent);
    } else {
      body = collapsibleContent;
    }

    return React.createElement("div", {
      "data-test-automation-id": testAutomationId
    }, headline, React.createElement(Collapse, {
      in: !this.state.isCollapsed
    }, body), footer);
  };

  return CollapsibleToolbar;
}(React.Component);

_defineProperty(CollapsibleToolbar, "propTypes", {
  testAutomationId: PropTypes.string,
  header: PropTypes.arrayOf(PropTypes.node).isRequired,
  collapsibleContent: PropTypes.node.isRequired,
  footer: PropTypes.node,
  hasBodyPadding: PropTypes.bool,
  moreButtonText: PropTypes.string,
  moreButtonLabel: PropTypes.string
});

_defineProperty(CollapsibleToolbar, "defaultProps", {
  testAutomationId: 'collapsibleToolbar',
  moreButtonText: 'TRANSLATE:MORE',
  moreButtonLabel: 'TRANSLATE:MORE_ADVANCED_FILTERS',
  hasBodyPadding: true,
  footer: null
});