'use strict';

exports.__esModule = true;
exports.CustomRefinementList = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactInstantsearchDom = require('react-instantsearch-dom');

var _orderBy = require('lodash/orderBy');

var _orderBy2 = _interopRequireDefault(_orderBy);

var _Toggle = require('../../../../components/Toggle');

var _Toggle2 = _interopRequireDefault(_Toggle);

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

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

var CustomRefinementList = exports.CustomRefinementList = function CustomRefinementList(_ref) {
  var items = _ref.items,
      refine = _ref.refine,
      onBlur = _ref.onBlur,
      isOpen = _ref.isOpen,
      onRefine = _ref.onRefine;

  var _useState = (0, _react.useState)(false),
      showMore = _useState[0],
      setShowMore = _useState[1];

  var limit = showMore ? 99 : 10;

  if (items.length <= 1) return null;

  var blurred = function blurred(event) {
    var currentTarget = event.currentTarget,
        key = event.key,
        shiftKey = event.shiftKey;

    if (key === 'Tab' && !shiftKey && currentTarget.matches(':last-of-type') && typeof onBlur === 'function') onBlur(event);
  };

  var orderedItems = (0, _orderBy2.default)(items, 'label', 'asc').slice(0, limit);

  return _react2.default.createElement(
    'details',
    { className: _styleModule2.default['RefinementList-Col'], open: isOpen },
    _react2.default.createElement(
      'summary',
      { className: _styleModule2.default['RefinementList-Header'], tabIndex: -1 },
      'Filters'
    ),
    _react2.default.createElement(
      'ol',
      { className: _styleModule2.default.RefinementList },
      orderedItems.map(function (item) {
        return _react2.default.createElement(
          'li',
          { key: item.label, className: _styleModule2.default['RefinementList-Item'], onKeyDown: blurred },
          _react2.default.createElement(_Toggle2.default, {
            checked: item.isRefined,
            className: _styleModule2.default['RefinementList-Toggle'],
            label: item.label,
            onChange: function onChange() {
              refine(item.value);
              onRefine(item.value);
            }
          })
        );
      })
    ),
    items.length > 10 && _react2.default.createElement(
      'button',
      { className: _styleModule2.default['RefinementList-Button'], onClick: function onClick() {
          return setShowMore(!showMore);
        }, type: 'button' },
      showMore ? 'Less' : 'More'
    )
  );
};

var RefinementList = (0, _reactInstantsearchDom.connectRefinementList)(CustomRefinementList);

CustomRefinementList.propTypes = process.env.NODE_ENV !== "production" ? {
  isOpen: _propTypes2.default.bool,
  items: _propTypes2.default.array,
  onBlur: _propTypes2.default.func,
  onRefine: _propTypes2.default.func,
  refine: _propTypes2.default.func
} : {};

RefinementList.propTypes = {
  attribute: _propTypes2.default.string
};

exports.default = RefinementList;