"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.MultiSelectFilterBase = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _designSystem = require("@wix/design-system");
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _FilterRenderingContext = require("../FilterRenderingContext");
var _useWindowFlipPopoverProps = require("../../utils/useWindowFlipPopoverProps");
var _providers = require("../../providers");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/MultiSelectFilterBase/MultiSelectFilterBase.tsx";
const inputSizeToTagSize = {
  tiny: 'tiny',
  small: 'tiny',
  medium: 'small',
  large: 'medium'
};
function _MultiSelectCheckboxFilterBase(props) {
  const {
    renderTag,
    filter,
    dropdownSelect,
    onSelect,
    onRemoveTag,
    size,
    popoverProps,
    ...rest
  } = props;
  const {
    location
  } = (0, _FilterRenderingContext.useFilterRenderingContext)();
  const {
    windowFlipPopoverProps,
    inputRef
  } = (0, _useWindowFlipPopoverProps.useWindowFlipPopoverProps)({
    popoverProps
  });
  const effectiveSize = size || (location === 'panel' ? 'small' : 'medium');
  const {
    select: {
      selectedValues
    }
  } = dropdownSelect;
  const {
    translate
  } = (0, _providers.useDropdownTranslationContext)();
  const tags = selectedValues.map(keyedItem => {
    const {
      key,
      item
    } = keyedItem;
    const tag = (renderTag == null ? void 0 : renderTag(item)) ?? {};
    return {
      id: key,
      label: filter.itemName(item),
      size: inputSizeToTagSize[effectiveSize],
      ...tag
    };
  });
  return /*#__PURE__*/_react.default.createElement(_designSystem.MultiSelect, (0, _extends2.default)({
    inputRef: ref => {
      inputRef.current = ref;
    },
    dataHook: `collection-filter-${filter.name}`,
    border: "round",
    placeholder: translate('placeholder'),
    tags: tags,
    size: size,
    onClose: () => {
      dropdownSelect.close();
    },
    onSelect: option => {
      const {
        keyedItem
      } = option;
      dropdownSelect.set(keyedItem);
      onSelect == null || onSelect(option);
    },
    onRemoveTag: tagId => {
      dropdownSelect.deleteKey(tagId);
      onRemoveTag == null || onRemoveTag(tagId);
    },
    popoverProps: windowFlipPopoverProps
  }, rest, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84,
      columnNumber: 5
    }
  }));
}
const MultiSelectFilterBase = exports.MultiSelectFilterBase = (0, _mobxReactLite.observer)(_MultiSelectCheckboxFilterBase);
//# sourceMappingURL=MultiSelectFilterBase.js.map