"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getOptionId = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useOptionKeyboardNavigation = require("../hooks/use-option-keyboard-navigation");
var _tooltip = require("../tooltip");
var _useListboxAttrs = require("../hooks/use-listbox-attrs");
var _useVisibleOptions = require("./use-visible-options");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 getOptionId = id => `typeahead-option-${id}`;
exports.getOptionId = getOptionId;
function TypeaheadOptionList({
  options,
  closeDropdown,
  handleSelect,
  handleMakeActive = () => {},
  searchFields,
  searchValue,
  optionId,
  optionLabel,
  width,
  optionComponent: OptionComponent,
  showAll = false,
  openedWithKeyboard = false,
  inputRef,
  noItemsText,
  listId = 'typeahead-scrollable-container',
  isMultiSelect = false
}) {
  const {
    visibleOptions
  } = (0, _useVisibleOptions.useVisibleOptions)({
    searchValue,
    options,
    searchFields,
    isShowAll: showAll
  });
  const {
    getOptionAttrs,
    role
  } = (0, _useListboxAttrs.useListboxAttrs)();
  const scrollableContainerRef = (0, _react.useRef)(null);
  const optionsRefs = visibleOptions.reduce((map, option) => {
    map[option[optionId]] = /*#__PURE__*/_react.default.createRef();
    return map;
  }, {});
  const [activeOption, makeActive,, focused] = (0, _useOptionKeyboardNavigation.useOptionKeyboardNavigation)(visibleOptions, optionId, handleSelect, closeDropdown, optionsRefs, scrollableContainerRef, 0, 'isDisabled', inputRef);
  (0, _react.useEffect)(() => {
    if (visibleOptions.some(o => o[optionId] === activeOption)) {
      handleMakeActive(activeOption);
    } else {
      handleMakeActive(null);
    }
  }, [handleMakeActive, activeOption]);
  if (!showAll && !searchValue || !visibleOptions.length && !noItemsText) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "typeahead-dropdown-list"
    /* eslint-disable-next-line react/forbid-dom-props */,
    style: {
      width
    },
    "test-id": "typeahead-dropdown-list",
    children: [visibleOptions.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "typeahead-scrollable-container",
      role: role,
      ref: scrollableContainerRef,
      id: listId,
      ...(isMultiSelect && {
        'aria-multiselectable': true
      }),
      children: visibleOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
        content: option.tooltip,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          "test-id": `typeahead-${option[optionLabel]}`,
          id: getOptionId(option[optionId]),
          ref: optionsRefs[option[optionId]],
          className: (0, _classnames.default)('typeahead-dropdown-item', {
            focused: focused !== -1 && focused === option[optionId] ||
            // adding outline to the element on initial opening when using keyboard
            openedWithKeyboard && activeOption === option[optionId],
            active: activeOption !== -1 && activeOption === option[optionId],
            disabled: option.isDisabled || option.id === 'typeahead-no-items'
          }),
          onMouseEnter: () => makeActive(option[optionId]),
          ...getOptionAttrs({
            tabIndex: -1,
            size: visibleOptions.length,
            position: visibleOptions.indexOf(option) + 1,
            isSelected: activeOption !== -1 && activeOption === option[optionId],
            isDisabled: option.isDisabled,
            onClick: () => {
              const isLastAvailableOption = visibleOptions.length === 1;
              handleSelect(option, isLastAvailableOption);
            }
          }),
          children: /*#__PURE__*/(0, _react.cloneElement)(OptionComponent, {
            item: option,
            searchValue,
            nameKey: optionLabel
          })
        })
      }, String(option[optionId])))
    }), !visibleOptions.length && noItemsText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      role: "alert",
      "aria-live": "polite",
      "aria-label": noItemsText,
      className: "typeahead-dropdown-item typeahead-dropdown-no-items",
      "test-id": "typeahead-option-list-no-item-message",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: noItemsText
      })
    })]
  });
}
var _default = exports.default = TypeaheadOptionList;