import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-ded78eb9.js';
import './es6.string.iterator-9b2af4a5.js';
import './core.get-iterator-method-54d2e411.js';
import './web.dom.iterable-8956f9a5.js';
import React__default, { useState, useEffect, useRef } from 'react';
import { _ as _slicedToArray } from './slicedToArray-7021e5df.js';
import { Dropdown } from 'react-bootstrap';

var PageFilter = function PageFilter(props) {
  var getParams = props.getParams,
      filters = props.filters,
      defaultFilter = props.defaultFilter;

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      filter = _useState2[0],
      setFilter = _useState2[1];

  var usePrevious = function usePrevious(value) {
    var ref = useRef();
    useEffect(function () {
      ref.current = value;
    });
    return ref.current;
  };

  var sortAttr = usePrevious({ filter: filter });

  useEffect(function () {
    if (sortAttr && sortAttr.filter !== filter) {
      getParams(filter);
    }
  }, [filter, sortAttr, getParams]);

  if (filters.length) {
    return React__default.createElement(
      Dropdown,
      { alignRight: true },
      React__default.createElement(
        Dropdown.Toggle,
        { className: 'filter-dropdown', id: 'filter-dropdown' },
        filter || defaultFilter
      ),
      React__default.createElement(
        Dropdown.Menu,
        { className: 'select-dropdown' },
        filters.map(function (filter, index) {
          return React__default.createElement(
            Dropdown.Item,
            { key: index, onClick: function onClick() {
                return setFilter(filter);
              } },
            filter
          );
        })
      ),
      React__default.createElement(
        'style',
        { jsx: 'true' },
        '\n          .filter-dropdown {\n            float: right;\n          }\n          .select-dropdown > a {\n            color: #8e8c84;\n          }\n        '
      )
    );
  }
  return null;
};

export default PageFilter;
