"use strict";

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

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

exports.__esModule = true;
exports.DropdownSelectFilter = void 0;

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

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

var _lib = require("@sentecacommerce-theme/lib");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../../../../../Common");

var _FilterWrapper = require("../FilterWrapper");

var _CheckboxList = require("../CheckboxList");

var _ButtonsContainer = require("../ButtonsContainer");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var labelGettersMap = {
  terms: _lib.getTermsAggregationLabel,
  ranges: function ranges(filter) {
    if (filter.data.from === '*') {
      return "\u043F\u043E\u0434 " + filter.data.to / 100 + "\u043B\u0432";
    }

    if (filter.data.to === '*') {
      return "\u043D\u0430\u0434 " + filter.data.from / 100 + "\u043B\u0432";
    }

    return filter.data.from / 100 + "\u043B\u0432 - " + filter.data.to / 100 + "\u043B\u0432";
  }
};

var DropdownSelectFilter = function DropdownSelectFilter(_ref) {
  var data = _ref.data;

  var _useState = (0, _react.useState)(false),
      showList = _useState[0],
      setShowList = _useState[1];

  var listRef = (0, _react.useRef)(null);
  var labelRef = (0, _react.useRef)(null);

  var _useState2 = (0, _react.useState)(false),
      isMobileModalVisible = _useState2[0],
      setIsMobileModalVisible = _useState2[1];

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  var openMobileModal = function openMobileModal() {
    return setIsMobileModalVisible(true);
  };

  var closeMobileModal = function closeMobileModal() {
    return setIsMobileModalVisible(false);
  };

  var openList = function openList() {
    return setShowList(true);
  };

  var hideList = function hideList() {
    return setShowList(false);
  };

  (0, _lib.useClickOutside)(listRef, hideList, [labelRef]);
  var selectedFilters = (0, _lib.useSelectedFilters)(data);
  var itemsLength = data.items.length;
  return /*#__PURE__*/_react["default"].createElement(_FilterWrapper.FilterWrapper, {
    onMobileArrowClick: openMobileModal,
    withMobileArrow: true,
    count: selectedFilters.length,
    filterName: data.name
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Label, {
    isListVisible: showList,
    ref: labelRef,
    onClick: showList ? hideList : openList
  }, /*#__PURE__*/_react["default"].createElement("span", null, Boolean(selectedFilters.length) ? /*#__PURE__*/_react["default"].createElement("span", null, selectedFilters.map(function (filter, i) {
    var _labelGettersMap$data;

    var label = ((_labelGettersMap$data = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data.call(labelGettersMap, filter)) || null;
    return /*#__PURE__*/_react["default"].createElement(SelectedFilterLabel, {
      key: "Facet-" + (label || i)
    }, label);
  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, buttons.choose, " ", data.name)), /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: showList ? 'up' : 'down'
  })), /*#__PURE__*/_react["default"].createElement(List, {
    isVisible: showList,
    ref: listRef
  }, data.items.map(function (filter, i) {
    var _labelGettersMap$data2;

    var label = ((_labelGettersMap$data2 = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data2.call(labelGettersMap, filter)) || null;
    var count = filter.data.count;
    return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, {
      key: "Facet__" + (label || i)
    }, /*#__PURE__*/_react["default"].createElement(_Common.Checkbox, {
      onChange: function onChange() {
        return filter.onClick();
      },
      isChecked: filter.selected,
      label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, label, Boolean(count) && /*#__PURE__*/_react["default"].createElement(Count, null, count, " ")),
      size: "tiny"
    }));
  }))), isMobileModalVisible && /*#__PURE__*/_react["default"].createElement(_Common.AnimatedModal, {
    mobileHeight: itemsLength * 39 - 9 + 80 + 'px',
    onClose: closeMobileModal,
    title: data.name,
    bottom: data.selectedCount ? function (_ref2) {
      var closeModal = _ref2.closeModal;
      return /*#__PURE__*/_react["default"].createElement(_ButtonsContainer.ButtonsContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
        bordered: true,
        onClick: data.clearAll
      }, buttons.clear, " (", data.selectedCount, ")"), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
        onClick: closeModal
      }, buttons.apply));
    } : undefined
  }, /*#__PURE__*/_react["default"].createElement(MobileItemsContainer, null, /*#__PURE__*/_react["default"].createElement(_CheckboxList.CheckboxList, {
    items: data.items,
    type: data.type
  }))));
};

exports.DropdownSelectFilter = DropdownSelectFilter;

var Container = _styledComponents["default"].div.attrs({
  className: 'd-none d-md-block'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var List = _styledComponents["default"].ul.attrs({
  className: 'row mx-0 py-3 px-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: translateY(", "rem);\n  position: absolute;\n  background: ", ";\n  border-radius: 0.2rem;\n  box-shadow: 0 0 1.6rem 0.4rem rgba(0, 0, 0, 0.08);\n\n  z-index: 1000;\n  width: 100%;\n  top: 5rem;\n  left: 0;\n  max-height: 16rem;\n  overflow-y: auto;\n"])), function (props) {
  return props.isVisible ? 1 : 0;
}, function (props) {
  return props.isVisible ? 'all' : 'none';
}, function (props) {
  return props.isVisible ? 1 : 0;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
});

var SelectedFilterLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  &:not(:last-of-type) {\n    &:after {\n      content: ', ';\n    }\n  }\n"])));

var Label = _styledComponents["default"].button.attrs({
  className: 'd-flex align-items-center justify-content-between px-3 py-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border: 0.1rem solid\n    ", ";\n  border-radius: 0 !important;\n  width: 100%;\n"])), function (props) {
  return props.theme.palette[props.isListVisible ? 'primary' : 'light'];
});

var CheckboxWrapper = _styledComponents["default"].li.attrs({
  className: 'col-12'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var MobileItemsContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 3rem 2rem;\n"])));

var Count = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center justify-content-center ml-2 px-2'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: 2.6rem;\n  height: 2rem;\n  font-size: 1rem;\n  color: ", ";\n  font-weight: bold;\n  background-color: ", ";\n  border-radius: 4rem;\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.light;
});
//# sourceMappingURL=index.js.map