"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.CustomRefinementList = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _orderBy = _interopRequireDefault(require("lodash/orderBy"));

var _Toggle = _interopRequireDefault(require("../../../../components/Toggle"));

// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "RefinementList": "_2mlVx-RefinementList",
  "RefinementList-Col": "IrN_N-RefinementList-Col",
  "RefinementList-Header": "_3GWsL-RefinementList-Header",
  "RefinementList-Item": "_2opeO-RefinementList-Item",
  "RefinementList-Button": "_2cJJ5-RefinementList-Button",
  "RefinementList-Toggle": "_1-Zgu-RefinementList-Toggle"
};

var 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),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      showMore = _useState2[0],
      setShowMore = _useState2[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, _orderBy["default"])(items, 'label', 'asc').slice(0, limit);
  return /*#__PURE__*/_react["default"].createElement("details", {
    className: classes['RefinementList-Col'],
    open: isOpen
  }, /*#__PURE__*/_react["default"].createElement("summary", {
    className: classes['RefinementList-Header'],
    tabIndex: -1
  }, "Filters"), /*#__PURE__*/_react["default"].createElement("ol", {
    className: classes.RefinementList
  }, orderedItems.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: item.label,
      className: classes['RefinementList-Item'],
      onKeyDown: blurred
    }, /*#__PURE__*/_react["default"].createElement(_Toggle["default"], {
      checked: item.isRefined,
      className: classes['RefinementList-Toggle'],
      label: item.label,
      onChange: function onChange() {
        refine(item.value);
        onRefine(item.value);
      }
    }));
  })), items.length > 10 && /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['RefinementList-Button'],
    onClick: function onClick() {
      return setShowMore(!showMore);
    },
    type: "button"
  }, showMore ? 'Less' : 'More'));
};

exports.CustomRefinementList = CustomRefinementList;
var RefinementList = (0, _reactInstantsearchDom.connectRefinementList)(CustomRefinementList);
CustomRefinementList.propTypes = {
  isOpen: _propTypes["default"].bool,
  items: _propTypes["default"].array,
  onBlur: _propTypes["default"].func,
  onRefine: _propTypes["default"].func,
  refine: _propTypes["default"].func
};
RefinementList.propTypes = {
  attribute: _propTypes["default"].string
};
var _default = RefinementList;
exports["default"] = _default;