import React, { cloneElement, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { useOptionKeyboardNavigation } from '../hooks/use-option-keyboard-navigation';
import { Tooltip } from '../tooltip';
import { useListboxAttrs } from '../hooks/use-listbox-attrs';
import { useVisibleOptions } from './use-visible-options';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const getOptionId = id => `typeahead-option-${id}`;
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
  } = useVisibleOptions({
    searchValue,
    options,
    searchFields,
    isShowAll: showAll
  });
  const {
    getOptionAttrs,
    role
  } = useListboxAttrs();
  const scrollableContainerRef = useRef(null);
  const optionsRefs = visibleOptions.reduce((map, option) => {
    map[option[optionId]] = /*#__PURE__*/React.createRef();
    return map;
  }, {});
  const [activeOption, makeActive,, focused] = useOptionKeyboardNavigation(visibleOptions, optionId, handleSelect, closeDropdown, optionsRefs, scrollableContainerRef, 0, 'isDisabled', inputRef);
  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__*/_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__*/_jsx("div", {
      className: "typeahead-scrollable-container",
      role: role,
      ref: scrollableContainerRef,
      id: listId,
      ...(isMultiSelect && {
        'aria-multiselectable': true
      }),
      children: visibleOptions.map(option => /*#__PURE__*/_jsx(Tooltip, {
        content: option.tooltip,
        children: /*#__PURE__*/_jsx("div", {
          "test-id": `typeahead-${option[optionLabel]}`,
          id: getOptionId(option[optionId]),
          ref: optionsRefs[option[optionId]],
          className: classNames('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__*/cloneElement(OptionComponent, {
            item: option,
            searchValue,
            nameKey: optionLabel
          })
        })
      }, String(option[optionId])))
    }), !visibleOptions.length && noItemsText && /*#__PURE__*/_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__*/_jsx("span", {
        children: noItemsText
      })
    })]
  });
}
export default TypeaheadOptionList;