"use strict";

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

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

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

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

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

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

var _styledComponents = _interopRequireWildcard(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, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;

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 AutocompleteFilter = function AutocompleteFilter(_ref) {
  var data = _ref.data;

  var _useState = (0, _react.useState)(''),
      query = _useState[0],
      setQuery = _useState[1];

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

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

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

  var closeMobileModal = function closeMobileModal() {
    setQuery('');
    setIsMobileModalVisible(false);
  };

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

  var openList = function openList() {
    (0, _lib.writeToLocalStorage)('AutocompleteFilter__isSelecting', true);
    setShowList(true);
  };

  var hideList = function hideList() {
    (0, _lib.writeToLocalStorage)('AutocompleteFilter__isSelecting', false);
    setShowList(false);
    setQuery('');
  };

  (0, _lib.useClickOutside)(listRef, hideList, [inputRef, mobileSearchRef]);
  (0, _react.useEffect)(function () {
    if ((0, _lib.readFromLocalStorage)('AutocompleteFilter__isSelecting')) setShowList(true);
  }, []);
  var itemsLength = data.items.length;
  var selectedFiltersCount = (0, _lib.useSelectedFilters)(data).length;
  var loweredQuery = query.toLowerCase(); //! TODO: optimization!

  var filteredItems = data.items.filter(function (filter) {
    var _labelGettersMap$data;

    if (!query) return true;
    var label = ((_labelGettersMap$data = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data.call(labelGettersMap, filter).toLowerCase()) || '';
    return label.includes(loweredQuery);
  });

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

  return /*#__PURE__*/_react["default"].createElement(_FilterWrapper.FilterWrapper, {
    filterName: data.name,
    count: selectedFiltersCount
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Label, {
    isListVisible: showList
  }, /*#__PURE__*/_react["default"].createElement(LabelContent, null, /*#__PURE__*/_react["default"].createElement(LabelText, {
    isListVisible: showList || (0, _lib.readFromLocalStorage)('AutocompleteFilter__isSelecting')
  }, buttons.choose, " ", data.name), /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: showList ? 'up' : 'down'
  })), /*#__PURE__*/_react["default"].createElement(Input, {
    isListVisible: showList,
    ref: inputRef,
    value: query,
    onChange: function onChange(e) {
      return setQuery(e.target.value);
    },
    onFocus: showList ? hideList : openList
  })), /*#__PURE__*/_react["default"].createElement(List, {
    isVisible: showList || (0, _lib.readFromLocalStorage)('AutocompleteFilter__isSelecting'),
    ref: listRef
  }, filteredItems.map(function (filter, i) {
    var _labelGettersMap$data2;

    var label = ((_labelGettersMap$data2 = labelGettersMap[data.type]) == null ? void 0 : _labelGettersMap$data2.call(labelGettersMap, filter)) || null;
    return /*#__PURE__*/_react["default"].createElement(Wrapper, {
      key: "Facet-" + (label || i)
    }, /*#__PURE__*/_react["default"].createElement(_Common.Checkbox, {
      onChange: function onChange() {
        (0, _lib.writeToLocalStorage)('AutocompleteFilter__isSelecting', true);
        filter.onClick();
      },
      isChecked: filter.selected,
      label: label,
      size: "tiny"
    }));
  }))), /*#__PURE__*/_react["default"].createElement(MobileContainer, {
    className: "mt-2 d-md-none"
  }, /*#__PURE__*/_react["default"].createElement(Relative, {
    onClick: openMobileModal,
    iconRight: true
  }, /*#__PURE__*/_react["default"].createElement(Input, {
    placeholder: "Choose " + data.name,
    isSearch: true,
    disabled: true
  }), /*#__PURE__*/_react["default"].createElement(_Common.Search, null))), isMobileModalVisible && /*#__PURE__*/_react["default"].createElement(_Common.AnimatedModal, {
    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, {
    ref: mobileSearchRef
  }, /*#__PURE__*/_react["default"].createElement(Relative, {
    className: "mb-4"
  }, /*#__PURE__*/_react["default"].createElement(Input, {
    placeholder: "Choose " + data.name,
    isSearch: true,
    value: query,
    onChange: function onChange(e) {
      return setQuery(e.target.value);
    },
    style: {
      paddingLeft: '3.8rem'
    }
  }), /*#__PURE__*/_react["default"].createElement(_Common.Search, null)), /*#__PURE__*/_react["default"].createElement(_CheckboxList.CheckboxList, {
    items: filteredItems,
    type: data.type
  }))));
};

exports.AutocompleteFilter = AutocompleteFilter;

var Input = _styledComponents["default"].input.attrs({
  className: 'd-flex align-items-center justify-content-between py-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border: 0.1rem solid\n    ", ";\n  border-radius: 0 !important;\n  width: 100%;\n  height: 4.7rem;\n  background: ", ";\n  padding: 0 1.4rem;\n\n  @media (max-width: ", ") {\n    background: ", ";\n  }\n"])), function (props) {
  return props.theme.palette[props.isListVisible ? 'primary' : 'light'];
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.sm.max;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.light;
});

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

var Relative = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  & > svg {\n    width: 2rem;\n    height: 2.4rem;\n    position: absolute;\n    top: calc(50% - 1.2rem);\n    ", "\n  }\n"])), function (props) {
  return props.iconRight ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n            right: 1.6rem;\n          "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n            left: 1.2rem;\n          "])));
});

var MobileContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Label = _styledComponents["default"].label.attrs({
  className: 'd-block'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 100%;\n"])));

var LabelText = _styledComponents["default"].span.attrs({
  className: 'px-1'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: ", ";\n  top: ", ";\n  left: -0.4rem;\n  background: ", ";\n"])), function (props) {
  return props.isListVisible ? '1.2rem' : 'inherit';
}, function (props) {
  return props.isListVisible ? '-2.25rem' : '0';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
});

var LabelContent = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center justify-content-between px-3 py-2'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n"])));

var List = _styledComponents["default"].ul.attrs({
  className: 'row mx-0 py-3 px-1'
})(_templateObject10 || (_templateObject10 = (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: rgba(0, 0, 0, 0.1) 0 0.2rem 0.2rem 0,\n    rgba(0, 0, 0, 0.16) 0 1rem 1.5rem 0;\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 (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
});

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

var MobileItemsContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 3rem 2rem;\n"])));
//# sourceMappingURL=index.js.map