import React from 'react';
import PropTypes from 'prop-types';

// import child components
import Button from '../../atoms/buttons/Button';
import ColoredHeading from '../../atoms/headings/ColoredHeading';
import DateRange from '../../forms/DateRange';
import OrgSelector from '../../forms/OrgSelector';
import SelectBox from '../../forms/SelectBox';
import InputTextTypeAhead from '../../forms/InputTextTypeAhead';
import './style.css';

var PressFilters = function PressFilters(props) {
  var action = props.action,
      coloredHeading = props.coloredHeading,
      topic = props.topic,
      orgSelector = props.orgSelector,
      pressType = props.pressType,
      dateRange = props.dateRange,
      submitButton = props.submitButton,
      clearButton = props.clearButton;

  var handleClear = function handleClear() {
    if (typeof props.clearButton.onClearCallback === 'function') {
      props.clearButton.onClearCallback();
    }
  };
  var selectBoxProps = pressType.selectBox;
  var typeAheadProps = pressType.typeAhead;
  return React.createElement(
    'section',
    { className: 'ma__press-filters' },
    React.createElement(
      'div',
      { className: 'ma__press-filters__container' },
      React.createElement(
        'header',
        { className: 'ma__press-filters__heading' },
        React.createElement(ColoredHeading, coloredHeading)
      ),
      React.createElement(
        'form',
        { className: 'ma__press-filters__form js-press-filters', action: action },
        React.createElement(
          'div',
          { className: 'ma__press-filters__organizations' },
          React.createElement(OrgSelector, orgSelector)
        ),
        topic && React.createElement(
          'div',
          { className: 'ma__press-filters__topic' },
          React.createElement(SelectBox, topic)
        ),
        React.createElement(
          'div',
          { className: 'ma__press-filters__type' },
          selectBoxProps && React.createElement(SelectBox, selectBoxProps),
          typeAheadProps && React.createElement(InputTextTypeAhead, typeAheadProps)
        ),
        React.createElement(
          'div',
          { className: 'ma__press-filters__date' },
          React.createElement(DateRange, dateRange)
        ),
        React.createElement(
          'div',
          { className: 'ma__press-filters__button' },
          React.createElement(Button, submitButton)
        ),
        clearButton && React.createElement(
          'button',
          { type: 'button', 'aria-label': clearButton.info, className: 'ma__press-filters__clear js-press-filters-clear', onClick: function onClick() {
              return handleClear();
            } },
          clearButton.text
        )
      )
    )
  );
};

PressFilters.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The form action  */
  action: PropTypes.string,
  /** @atoms/headings/ColoredHeading */
  coloredHeading: PropTypes.shape(ColoredHeading.PropTypes),
  /** @forms/SelectBox */
  topic: PropTypes.shape(SelectBox.PropTypes),
  /** @forms/SelectBox or /** @forms/InputTextTypeAhead  */
  pressType: PropTypes.oneOf([PropTypes.shape({ selectBox: SelectBox.propTypes }), PropTypes.shape({ typeAhead: InputTextTypeAhead.propTypes })]),
  /** @molecules/OrgSelector */
  orgSelector: PropTypes.shape(OrgSelector.PropTypes).isRequired,
  /** @molecules/DateRange */
  dateRange: PropTypes.shape(DateRange.PropTypes).isRequired,
  /** @forms/Button */
  submitButton: PropTypes.shape(Button.PropTypes).isRequired,
  /** Clear all button at the bottom of the filter */
  clearButton: PropTypes.shape({
    text: PropTypes.string,
    info: PropTypes.string,
    onClearCallback: PropTypes.func
  })
} : {};

PressFilters.defaultProps = {
  action: '#',
  coloredHeading: ColoredHeading.defaultProps
};

export default PressFilters;