"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CollapsibleToolbar = void 0;

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Collapse = _interopRequireDefault(require("react-bootstrap/lib/Collapse"));

var _Button = require("./Button");

var _Block = require("./Block");

var _Icon = require("./Icon");

var _Row = require("./Row");

var _Col = _interopRequireDefault(require("react-bootstrap/lib/Col"));

var CollapsibleToolbar =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(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.default.createElement(_Button.Button, {
      "aria-label": moreButtonLabel,
      "aria-expanded": !isCollapsed,
      onClick: this.handleToggleClick.bind(this),
      withIcon: true,
      bsStyle: "link"
    }, moreButtonText, _react.default.createElement(_Icon.Icon, {
      name: iconName
    }));
  };

  _proto.wrapMoreButton = function wrapMoreButton(moreButton) {
    return _react.default.createElement(_Col.default, {
      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.default.createElement(_Row.Row, null, header, this.wrapMoreButton(this.getMoreButton()));

    var body;

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

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

  return CollapsibleToolbar;
}(_react.default.Component);

exports.CollapsibleToolbar = CollapsibleToolbar;
(0, _defineProperty2.default)(CollapsibleToolbar, "propTypes", {
  testAutomationId: _propTypes.default.string,
  header: _propTypes.default.arrayOf(_propTypes.default.node).isRequired,
  collapsibleContent: _propTypes.default.node.isRequired,
  footer: _propTypes.default.node,
  hasBodyPadding: _propTypes.default.bool,
  moreButtonText: _propTypes.default.string,
  moreButtonLabel: _propTypes.default.string
});
(0, _defineProperty2.default)(CollapsibleToolbar, "defaultProps", {
  testAutomationId: 'collapsibleToolbar',
  moreButtonText: 'TRANSLATE:MORE',
  moreButtonLabel: 'TRANSLATE:MORE_ADVANCED_FILTERS',
  hasBodyPadding: true,
  footer: null
});