import React from 'react';
import PropTypes from 'prop-types';
import { componentWithName } from 'airbnb-prop-types';
import classNames from 'classnames';

// import child components
import Button from '../../atoms/buttons/Button';
import './style.css';

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 = classNames({
    'ma__filter-box': true,
    'ma__filter-box--desktop-hidden': props.filterDesktopHidden
  });
  var filterBoxFormClasses = classNames({
    'ma__filter-box__form js-filter-box': true,
    'ma__filter-box__form--active': active
  });
  return React.createElement(
    'section',
    { className: filterBoxClasses, id: props.id },
    React.createElement(
      'div',
      { className: 'ma__filter-box__container' },
      React.createElement(
        'form',
        {
          className: filterBoxFormClasses,
          action: action,
          'aria-describedby': filterNote ? props.id + '-note' : null,
          'aria-label': filterLabel || null
        },
        filterNote && React.createElement(
          'div',
          { id: props.id + '-note', 'aria-hidden': 'true', className: 'ma-visually-hidden' },
          filterNote
        ),
        React.createElement(
          'div',
          { className: 'main-content--two' },
          React.createElement(
            'div',
            { className: 'ma__filter-box__filters' },
            fields.map(function (field, i) {
              return (
                /* eslint-disable-next-line react/no-array-index-key */
                React.createElement(
                  'div',
                  { className: field.class, key: 'filterbox-field-' + i },
                  field.component
                )
              );
            })
          ),
          (submitButton || clearButton) && React.createElement(
            'div',
            { className: 'ma__filter-box__controls' },
            submitButton && React.createElement(
              'div',
              { className: 'ma__filter-box__button' },
              React.createElement(Button, submitButton)
            ),
            clearButton && React.createElement(
              React.Fragment,
              null,
              React.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: PropTypes.string,
  /** Apply active state  */
  active: PropTypes.bool,
  /** The form action  */
  action: PropTypes.string,
  /** The aria-label for the filter form element  */
  filterLabel: PropTypes.string,
  /** An additional note for the SR users describing the functionality of the filter  */
  filterNote: PropTypes.string,
  /** @forms/Button */
  submitButton: PropTypes.shape(Button.PropTypes),
  /** Clear all button at the bottom of the filter */
  clearButton: PropTypes.shape({
    text: PropTypes.string,
    info: PropTypes.string,
    onClearCallback: PropTypes.func
  }),
  /** Controls if we allow filterbox to render only on mobile */
  filterDesktopHidden: PropTypes.bool,
  /** An array of filter fields */
  fields: PropTypes.arrayOf(PropTypes.shape({
    class: PropTypes.string,
    component: PropTypes.oneOfType([componentWithName('SelectBox'), componentWithName('InputTextTypeAhead'), componentWithName('InputTextFuzzy'), 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: '#'
};

export default FilterBox;