'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _airbnbPropTypes = require('airbnb-prop-types');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Button = require('../../atoms/buttons/Button');

var _Button2 = _interopRequireDefault(_Button);

require('./style.css');

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

// import child components
var FilterBox = function FilterBox(props) {
  var action = props.action,
      submitButton = props.submitButton,
      clearButton = props.clearButton,
      active = props.active,
      fields = props.fields,
      filterLabel = props.filterLabel,
      filterNote = props.filterNote;

  var handleClear = function handleClear() {
    if (typeof props.clearButton.onClearCallback === 'function') {
      props.clearButton.onClearCallback();
    }
  };
  var filterBoxClasses = (0, _classnames2.default)({
    'ma__filter-box': true,
    'ma__filter-box--desktop-hidden': props.filterDesktopHidden
  });
  var filterBoxFormClasses = (0, _classnames2.default)({
    'ma__filter-box__form js-filter-box': true,
    'ma__filter-box__form--active': active
  });
  return _react2.default.createElement(
    'section',
    { className: filterBoxClasses, id: props.id },
    _react2.default.createElement(
      'div',
      { className: 'ma__filter-box__container' },
      _react2.default.createElement(
        'form',
        {
          className: filterBoxFormClasses,
          action: action,
          'aria-describedby': filterNote ? props.id + '-note' : null,
          'aria-label': filterLabel || null
        },
        filterNote && _react2.default.createElement(
          'div',
          { id: props.id + '-note', 'aria-hidden': 'true', className: 'ma-visually-hidden' },
          filterNote
        ),
        _react2.default.createElement(
          'div',
          { className: 'main-content--two' },
          _react2.default.createElement(
            'div',
            { className: 'ma__filter-box__filters' },
            fields.map(function (field, i) {
              return (
                /* eslint-disable-next-line react/no-array-index-key */
                _react2.default.createElement(
                  'div',
                  { className: field.class, key: 'filterbox-field-' + i },
                  field.component
                )
              );
            })
          ),
          (submitButton || clearButton) && _react2.default.createElement(
            'div',
            { className: 'ma__filter-box__controls' },
            submitButton && _react2.default.createElement(
              'div',
              { className: 'ma__filter-box__button' },
              _react2.default.createElement(_Button2.default, submitButton)
            ),
            clearButton && _react2.default.createElement(
              _react2.default.Fragment,
              null,
              _react2.default.createElement(
                'button',
                { type: 'button', 'aria-label': clearButton.info, className: 'ma__filter-box__clear js-filter-box-clear', onClick: function onClick() {
                    return handleClear();
                  } },
                clearButton.text
              )
            )
          )
        )
      )
    )
  );
};

FilterBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The id of the FilterBox component. */
  id: _propTypes2.default.string,
  /** Apply active state  */
  active: _propTypes2.default.bool,
  /** The form action  */
  action: _propTypes2.default.string,
  /** The aria-label for the filter form element  */
  filterLabel: _propTypes2.default.string,
  /** An additional note for the SR users describing the functionality of the filter  */
  filterNote: _propTypes2.default.string,
  /** @forms/Button */
  submitButton: _propTypes2.default.shape(_Button2.default.PropTypes),
  /** Clear all button at the bottom of the filter */
  clearButton: _propTypes2.default.shape({
    text: _propTypes2.default.string,
    info: _propTypes2.default.string,
    onClearCallback: _propTypes2.default.func
  }),
  /** Controls if we allow filterbox to render only on mobile */
  filterDesktopHidden: _propTypes2.default.bool,
  /** An array of filter fields */
  fields: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    class: _propTypes2.default.string,
    component: _propTypes2.default.oneOfType([(0, _airbnbPropTypes.componentWithName)('SelectBox'), (0, _airbnbPropTypes.componentWithName)('InputTextTypeAhead'), (0, _airbnbPropTypes.componentWithName)('InputTextFuzzy'), (0, _airbnbPropTypes.componentWithName)('DateRange')])
  }))
} : {};

FilterBox.defaultProps = {
  id: 'filter-box',
  active: false,
  clearButton: {
    text: 'Clear all filters',
    info: 'Clear all applied filters'
  },
  submitButton: {
    text: 'Submit',
    type: 'submit',
    size: '',
    theme: '',
    usage: ''
  },
  action: '#'
};

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