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; };

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; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import FilterBox from '../../organisms/FilterBox';
import HeaderSearch from '../../molecules/HeaderSearch';
import Icon from '../../base/Icon';
import Tabs from '../../molecules/Tabs';
// eslint-disable-next-line import/no-unresolved
import './style.css';

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 = classNames({
      'ma__search-banner__top': true,
      'ma__search-banner__top--noTabs': !tabs
    });
    var toggleButtonClasses = classNames({
      '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 React.createElement(
      'div',
      { className: searchBannerClasses },
      React.createElement(
        'div',
        { className: 'main-content--two' },
        React.createElement(
          'h2',
          { className: 'visually-hidden' },
          'Search Form'
        ),
        React.createElement(HeaderSearch, searchBox)
      ),
      tabs && React.createElement(Tabs, tabs),
      React.createElement(
        'div',
        { className: 'ma_search-banner__filter-box-container' },
        filterBox && React.createElement(
          'div',
          { className: 'main-content--two ma__search-banner__filter-box-toggle-container' },
          React.createElement(
            'button',
            {
              onClick: this.toggleFilterBox,
              type: 'button',
              className: toggleButtonClasses,
              'aria-controls': this.props.filterBox.id,
              'aria-expanded': this.state.filterBoxExpanded
            },
            filterToggleText,
            React.createElement(Icon, { name: 'chevron', svgWidth: 20, svgHeight: 20 })
          )
        ),
        filterBox && this.state.filterBoxExpanded && React.createElement(FilterBox, _extends({}, filterBox, { submitButton: submitButton }))
      )
    );
  };

  return SearchBanner;
}(Component);

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

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

export default SearchBanner;