'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _FilterBox = require('../../organisms/FilterBox');

var _FilterBox2 = _interopRequireDefault(_FilterBox);

var _HeaderSearch = require('../../molecules/HeaderSearch');

var _HeaderSearch2 = _interopRequireDefault(_HeaderSearch);

var _Icon = require('../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _Tabs = require('../../molecules/Tabs');

var _Tabs2 = _interopRequireDefault(_Tabs);

require('./style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// eslint-disable-next-line import/no-unresolved


var SearchBanner = function (_Component) {
  _inherits(SearchBanner, _Component);

  function SearchBanner(props) {
    _classCallCheck(this, SearchBanner);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.state = {
      filterBoxExpanded: false
    };
    _this.toggleFilterBox = _this.toggleFilterBox.bind(_this);
    return _this;
  }

  SearchBanner.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var filterBoxExpanded = nextProps.filterBoxExpanded;

    if (this.state.filterBoxExpanded !== filterBoxExpanded) {
      this.setState({ filterBoxExpanded: filterBoxExpanded });
    }
  };

  SearchBanner.prototype.toggleFilterBox = function toggleFilterBox() {
    this.setState(function (prevState) {
      return { filterBoxExpanded: !prevState.filterBoxExpanded };
    });
    if (typeof this.props.toggleButtonOnClick === 'function') {
      this.props.toggleButtonOnClick(this.state.filterBoxExpanded);
    }
  };

  SearchBanner.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        tabs = _props.tabs,
        searchBox = _props.searchBox,
        filterBox = _props.filterBox,
        filterToggleText = _props.filterToggleText;

    var submitButton = void 0;

    if (filterBox && filterBox.submitButton) {
      var outerClickHandler = filterBox.submitButton.onClick;
      submitButton = _extends({}, filterBox.submitButton, {
        onClick: function onClick(e) {
          _this2.toggleFilterBox();
          outerClickHandler(e);
        }
      });
    }
    var searchBannerClasses = (0, _classnames2.default)({
      'ma__search-banner__top': true,
      'ma__search-banner__top--noTabs': !tabs
    });
    var toggleButtonClasses = (0, _classnames2.default)({
      'ma__search-banner__filter-box-toggle': true,
      'ma__search-banner__filter-box-toggle--expanded': this.state.filterBoxExpanded,
      'ma__search-banner__filter-box-toggle--desktop-hidden': this.props.filterDesktopHidden
    });
    return _react2.default.createElement(
      'div',
      { className: searchBannerClasses },
      _react2.default.createElement(
        'div',
        { className: 'main-content--two' },
        _react2.default.createElement(
          'h2',
          { className: 'visually-hidden' },
          'Search Form'
        ),
        _react2.default.createElement(_HeaderSearch2.default, searchBox)
      ),
      tabs && _react2.default.createElement(_Tabs2.default, tabs),
      _react2.default.createElement(
        'div',
        { className: 'ma_search-banner__filter-box-container' },
        filterBox && _react2.default.createElement(
          'div',
          { className: 'main-content--two ma__search-banner__filter-box-toggle-container' },
          _react2.default.createElement(
            'button',
            {
              onClick: this.toggleFilterBox,
              type: 'button',
              className: toggleButtonClasses,
              'aria-controls': this.props.filterBox.id,
              'aria-expanded': this.state.filterBoxExpanded
            },
            filterToggleText,
            _react2.default.createElement(_Icon2.default, { name: 'chevron', svgWidth: 20, svgHeight: 20 })
          )
        ),
        filterBox && this.state.filterBoxExpanded && _react2.default.createElement(_FilterBox2.default, _extends({}, filterBox, { submitButton: submitButton }))
      )
    );
  };

  return SearchBanner;
}(_react.Component);

SearchBanner.propTypes = process.env.NODE_ENV !== "production" ? {
  /** @molecules/HeaderSearch */
  searchBox: _propTypes2.default.shape(_propTypes2.default.HeaderSearch).isRequired,
  /** @molecules/Tabs */
  tabs: _propTypes2.default.shape(_propTypes2.default.Tabs),
  /** @organisms/FilterBox */
  filterBox: _propTypes2.default.shape(_propTypes2.default.FilterBox),
  /** filterbox toggle button custom function */
  toggleButtonOnClick: _propTypes2.default.func,
  /** Controls if filterBox is expanded */
  filterBoxExpanded: _propTypes2.default.bool,
  /** Controls if we allow filterbox toggle to render only on mobile */
  filterDesktopHidden: _propTypes2.default.bool,
  /** Filter box toggle button text */
  filterToggleText: _propTypes2.default.string
} : {};

SearchBanner.defaultProps = {
  filterDesktopHidden: false,
  filterToggleText: 'More Filters',
  filterBoxExpanded: false,
  filterBox: {
    id: 'filter-box'
  }
};

exports.default = SearchBanner;
module.exports = exports['default'];