"use strict";

exports.__esModule = true;
exports._BulkAssignTagsPopover = exports.BulkAssignTagsPopover = void 0;
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _react2 = require("@wix/bex-core/react");
var _designSystem = require("@wix/design-system");
var _CreateTagButton = require("./CreateTagButton");
var _EmptyState = require("./EmptyState");
var _Footer = require("./Footer");
var _bexCore = require("@wix/bex-core");
var _minimalRequiredWdsRuntimeCheck = require("../../../minimalRequiredWdsRuntimeCheck");
var _AsyncJobProgressModal = require("./AsyncJobProgressModal");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Tags/BulkAssignTagsPopover/BulkAssignTagsPopover.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const _BulkAssignTagsPopover = ({
  state,
  popoverElement
}) => {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const closePopover = (0, _react.useCallback)(() => {
    state.closePopover();
  }, [state]);
  const handleItemSelect = (0, _react.useCallback)(item => {
    state.handleItemSelect(item.id);
  }, [state]);
  if (process.env.NODE_ENV !== 'production') {
    (0, _minimalRequiredWdsRuntimeCheck.minimalRequiredWdsRuntimeCheck)({
      required: '^1.76.1',
      requiredBy: 'WixPatterns/BulkAssignTagsPopover'
    });
  }
  const selectorListDataSource = searchQuery => {
    state.handleSearchChange(searchQuery);
    const filteredOptions = state.tagOptions.filter(tag => {
      return tag.name.toLowerCase().includes(searchQuery);
    });
    if (filteredOptions.length === 0 && searchQuery.length > _bexCore.TAG_MAX_LENGTH) {
      const truncatedTag = state.tagOptions.find(tag => {
        var _tag$name;
        return ((_tag$name = tag.name) == null ? void 0 : _tag$name.toLowerCase()) === searchQuery.substring(0, _bexCore.TAG_MAX_LENGTH).toLowerCase();
      });
      if (truncatedTag) {
        filteredOptions.push(truncatedTag);
      }
    }
    const items = filteredOptions.map((tag, idx) => ({
      id: tag.id,
      title: /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
        id: tag.id,
        removable: false,
        maxWidth: "198px",
        dataHook: `bulk-assign-tags-tag-${idx}`,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 63,
          columnNumber: 9
        }
      }, tag.name),
      selected: state.assignedWithOptimisticTagIds.includes(tag.id),
      indeterminate: state.indeterminateTagIds.includes(tag.id)
    }));
    return Promise.resolve({
      items,
      totalCount: items.length
    });
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
    tabIndex: 0,
    showArrow: true,
    shown: state.isShown,
    appendTo: "window",
    placement: "bottom",
    width: "304px",
    onClickOutside: closePopover,
    onEscPress: closePopover,
    onTabOut: closePopover,
    dataHook: "bulk-assign-tags-popover",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      columnNumber: 9
    }
  }, popoverElement), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    height: "270px",
    direction: "vertical",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 11
    }
  }, state.isLoading && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    align: "center",
    verticalAlign: "middle",
    flex: 1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
    dataHook: "bulk-assign-tags-loading-state",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 17
    }
  })), !state.isLoading && /*#__PURE__*/_react.default.createElement(_designSystem.SelectorList, {
    autoFocus: true,
    key: state.tagsManagementState.items.length // Remount the component on every new created tag
    ,
    dataHook: "bulk-assign-tags-selector-list",
    dataSource: selectorListDataSource,
    emptyState: /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
      state: state,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 109,
        columnNumber: 29
      }
    }),
    size: "small",
    searchPlaceholder: state.isInEmptyState ? t('cairo.tags.collectionPage.popover.emptyState.search.placeholder') : t('cairo.tags.collectionPage.popover.search.placeholder'),
    renderNoResults: searchValue => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      padding: "SP2 SP5",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 119,
        columnNumber: 19
      }
    }, /*#__PURE__*/_react.default.createElement(_CreateTagButton.CreateTagButton, {
      state: state,
      searchValue: searchValue,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 21
      }
    })),
    searchMaxLength: _bexCore.TAG_MAX_LENGTH,
    multiple: true,
    onSelect: handleItemSelect,
    height: "216px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 15
    }
  }), /*#__PURE__*/_react.default.createElement(_Footer.Footer, {
    state: state,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129,
      columnNumber: 13
    }
  })))), /*#__PURE__*/_react.default.createElement(_AsyncJobProgressModal.AsyncJobProgressModal, {
    state: state,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 133,
      columnNumber: 7
    }
  }));
};
exports._BulkAssignTagsPopover = _BulkAssignTagsPopover;
const BulkAssignTagsPopover = exports.BulkAssignTagsPopover = (0, _mobxReactLite.observer)(_BulkAssignTagsPopover);
//# sourceMappingURL=BulkAssignTagsPopover.js.map