import React from 'react';
import PropTypes from 'prop-types';
import ButtonToggle from '../../atoms/buttons/ButtonToggle';
import SelectBox from '../../forms/SelectBox';
import Tags from '../../molecules/Tags';
import './style.css';

var ResultsHeading = function ResultsHeading(resultsHeading) {
  var resultsHeadingTotal = resultsHeading.totalResults ? ' of ' + resultsHeading.totalResults + ' for: ' : '';
  var resultsHeadingTitle = 'Showing results ' + resultsHeading.numResults + resultsHeadingTotal;
  var tags = resultsHeading.tags;

  var selectBoxProps = resultsHeading.selectBox;
  var buttonToggleProps = resultsHeading.buttonToggle;
  return React.createElement(
    'div',
    { className: 'ma__results-heading js-results-heading' },
    React.createElement(
      'div',
      { className: 'ma__results-heading__container' },
      React.createElement(
        'div',
        { className: 'ma__results-heading__title' },
        resultsHeadingTitle
      ),
      tags && React.createElement(Tags, tags),
      selectBoxProps && React.createElement(
        'div',
        { className: 'ma__results-heading__sort ma__results-heading__sort-selecBox' },
        React.createElement(SelectBox, selectBoxProps)
      ),
      buttonToggleProps && React.createElement(
        'div',
        { className: 'ma__results-heading__sort' },
        React.createElement(ButtonToggle, buttonToggleProps)
      )
    )
  );
};

ResultsHeading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The range of results being displayed, e.g. 1-10 */
  numResults: PropTypes.string,
  /** The total count of results */
  totalResults: PropTypes.string,
  /** The sort input type as ButtonToggle */
  buttonToggle: PropTypes.shape(ButtonToggle.props),
  /** The sort input type as SelectBox */
  selecBox: PropTypes.shape(SelectBox.props),
  /** The array of tags and the tags callback functions */
  tags: PropTypes.shape(Tags.propTypes)
} : {};

export default ResultsHeading;