"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _ContentSt = require("./Content.st.css.js");
var _SelectorList = require("../SelectorList.helpers");
var _Selector = _interopRequireDefault(require("../../Selector"));
var _Loader = _interopRequireDefault(require("../../Loader"));
var _InfiniteScroll = _interopRequireDefault(require("../../utils/InfiniteScroll"));
var _Text = _interopRequireDefault(require("../../Text"));
var _useScrollKeyboardNavigation = _interopRequireDefault(require("./useScrollKeyboardNavigation"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectorList/Content/Content.jsx",
  _this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
var DEFAULT_EMPTY = /*#__PURE__*/_react["default"].createElement("div", {
  className: _ContentSt.classes.defaultEmptyStateWrapper,
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 12,
    columnNumber: 3
  }
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 13,
    columnNumber: 5
  }
}, "You don't have any items"));
var ListItems = function ListItems(_ref) {
  var items = _ref.items,
    checkIsSelected = _ref.checkIsSelected,
    checkIndeterminate = _ref.checkIndeterminate,
    _onToggle = _ref.onToggle,
    size = _ref.size,
    imageSize = _ref.imageSize,
    imageShape = _ref.imageShape,
    multiple = _ref.multiple,
    showDivider = _ref.showDivider,
    activeItemId = _ref.activeItemId,
    getItemDomId = _ref.getItemDomId;
  if (!items.length) {
    return null;
  }
  return /*#__PURE__*/_react["default"].createElement("ul", {
    "data-hook": _SelectorList.dataHooks.list,
    className: _ContentSt.classes.list,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 5
    }
  }, items.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_Selector["default"], {
      id: getItemDomId(item.id),
      key: item.id,
      dataHook: _SelectorList.dataHooks.selector,
      size: size,
      imageSize: imageSize,
      imageShape: imageShape,
      showDivider: showDivider && index + 1 < items.length,
      toggleType: multiple ? 'checkbox' : 'radio',
      image: item.image,
      title: item.title,
      subtitle: item.subtitle,
      extraNode: item.extraNode ? item.extraNode : item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        secondary: true,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 52,
          columnNumber: 35
        }
      }, item.extraText),
      subtitleNode: item.subtitleNode,
      belowNode: item.belowNode,
      showBelowNodeOnSelect: item.showBelowNodeOnSelect,
      isSelected: checkIsSelected(item),
      indeterminate: checkIndeterminate == null ? void 0 : checkIndeterminate(item),
      isDisabled: item.disabled,
      isActive: item.id === activeItemId,
      toggleTooltipProps: item.toggleTooltipProps,
      onToggle: function onToggle() {
        !item.disabled && _onToggle(item);
      },
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 37,
        columnNumber: 9
      }
    });
  }));
};
var SelectorListContent = function SelectorListContent(_ref2) {
  var _ref2$dataHook = _ref2.dataHook,
    dataHook = _ref2$dataHook === void 0 ? _SelectorList.dataHooks.content : _ref2$dataHook,
    items = _ref2.items,
    topScrollableContent = _ref2.topScrollableContent,
    onToggle = _ref2.onToggle,
    _ref2$emptyState = _ref2.emptyState,
    emptyState = _ref2$emptyState === void 0 ? DEFAULT_EMPTY : _ref2$emptyState,
    _ref2$renderNoResults = _ref2.renderNoResults,
    renderNoResults = _ref2$renderNoResults === void 0 ? function (searchValue) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _ContentSt.classes.defaultNoResultsFoundStateWrapper,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 5
        }
      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 7
        }
      }, "No items matched your search ", "\"".concat(searchValue, "\"")));
    } : _ref2$renderNoResults,
    isLoading = _ref2.isLoading,
    checkIsSelected = _ref2.checkIsSelected,
    checkIndeterminate = _ref2.checkIndeterminate,
    isEmpty = _ref2.isEmpty,
    noResultsFound = _ref2.noResultsFound,
    size = _ref2.size,
    imageSize = _ref2.imageSize,
    imageShape = _ref2.imageShape,
    multiple = _ref2.multiple,
    showDivider = _ref2.showDivider,
    searchValue = _ref2.searchValue,
    loadMore = _ref2.loadMore,
    hasMore = _ref2.hasMore,
    infiniteScrollRef = _ref2.infiniteScrollRef;
  var containerRef = (0, _react.useRef)(null);

  // Generate a unique instance ID for this SelectorList (stable across re-renders)
  var listInstanceId = (0, _react.useMemo)(function () {
    return (0, _uniqueId["default"])('selector-list-');
  }, []);

  // Function to get DOM id for an item - passed to hook for scrolling
  var getItemDomId = (0, _react.useCallback)(function (itemId) {
    return "".concat(listInstanceId, "-item-").concat(itemId);
  }, [listInstanceId]);
  var _useScrollKeyboardNav = (0, _useScrollKeyboardNavigation["default"])({
      containerRef: containerRef,
      items: items,
      getItemDomId: getItemDomId,
      multiple: multiple,
      onToggle: onToggle
    }),
    handleKeyDown = _useScrollKeyboardNav.handleKeyDown,
    handleFocus = _useScrollKeyboardNav.handleFocus,
    handleBlur = _useScrollKeyboardNav.handleBlur,
    handleMouseDown = _useScrollKeyboardNav.handleMouseDown,
    activeItemId = _useScrollKeyboardNav.activeItemId;

  // Get DOM id for aria-activedescendant
  var activeDescendantId = activeItemId !== null ? getItemDomId(activeItemId) : undefined;
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: containerRef,
    className: _ContentSt.classes.content,
    "data-hook": dataHook,
    tabIndex: 0,
    role: "listbox",
    "aria-activedescendant": activeDescendantId,
    onKeyDown: handleKeyDown,
    onFocus: handleFocus,
    onBlur: handleBlur,
    onMouseDown: handleMouseDown,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 5
    }
  }, isLoading && /*#__PURE__*/_react["default"].createElement("div", {
    className: _ContentSt.classes.mainLoaderWrapper,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
    size: "medium",
    dataHook: _SelectorList.dataHooks.mainLoader,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 11
    }
  })), isEmpty && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _SelectorList.dataHooks.emptyState,
    className: _ContentSt.classes.emptyStateWrapper,
    children: emptyState,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 146,
      columnNumber: 9
    }
  }), items.length > 0 && /*#__PURE__*/_react["default"].createElement(_InfiniteScroll["default"], {
    key: searchValue,
    ref: infiniteScrollRef,
    data: items,
    loadMore: loadMore,
    hasMore: hasMore,
    useWindow: false,
    initialLoad: false,
    loader: /*#__PURE__*/_react["default"].createElement("div", {
      className: _ContentSt.classes.nextPageLoaderWrapper,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 163,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
      size: "small",
      dataHook: _SelectorList.dataHooks.nextPageLoader,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 164,
        columnNumber: 15
      }
    })),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 154,
      columnNumber: 9
    }
  }, topScrollableContent, /*#__PURE__*/_react["default"].createElement(ListItems, {
    items: items,
    checkIsSelected: checkIsSelected,
    checkIndeterminate: checkIndeterminate,
    onToggle: onToggle,
    size: size,
    imageSize: imageSize,
    imageShape: imageShape,
    showDivider: showDivider,
    multiple: multiple,
    activeItemId: activeItemId,
    getItemDomId: getItemDomId,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 169,
      columnNumber: 11
    }
  })), noResultsFound && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _SelectorList.dataHooks.noResultsFoundState,
    className: _ContentSt.classes.noResultsFoundStateWrapper,
    children: renderNoResults(searchValue),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 188,
      columnNumber: 9
    }
  }));
};
var _default = exports["default"] = SelectorListContent;