import React from 'react';
import { flattenTree, getDummyNode, getFocusableNodes, getKeyActionFnSearch } from '../hooks/use-tree-navigation/utils';
import { Search } from '../search';
import DropdownItem from './dropdown-item';
import DropdownList from './dropdown-list';
import DropdownMenuMultiLevelList from './dropdown-menu-multi-level-list';
import { useTreeNodeNavigation } from '../hooks';
import { KEYS } from '../hooks/use-tree-navigation/constants';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const getMapFn = isExpandedByDefault => {
  const mapFunction = (option, parents) => {
    let treeNode;
    let children = [];
    // use isLeaf in keys to distinguish between TreeNode and DropdownMenuOption,
    // we passing TreeNode directly in case we have a search input
    if (!('isLeaf' in option)) {
      children = option.subItems || [];
      treeNode = {
        id: option.privateKey || option.key,
        label: String(option.title),
        parent: parents[0] ?? null,
        parents,
        isDisabled: option.disabled || children.length && children.every(c => c.disabled || c.isShown === false) || option.isShown === false,
        isExpanded: !!children.length && isExpandedByDefault,
        isExpandable: !!children.length,
        isFocused: false,
        isLeaf: !children.length,
        children: children.map(({
          key
        }) => key)
      };
    } else {
      // consumer may pass DropdownMenuOption without `key` property despite it being required, so adding safety measure
      treeNode = {
        ...getDummyNode(option.id),
        ...option
      };
    }
    return {
      node: treeNode,
      children
    };
  };
  return mapFunction;
};
export const getMenuTreeNavigationAdapter = ({
  isExpandedByDefault
}) => {
  const mapFn = getMapFn(isExpandedByDefault);
  return {
    isExpandedByDefault,
    getFlatNodes: tree => flattenTree(tree, mapFn),
    getFocusableNodes
  };
};
export const SEARCH_ID = 'dropdown-menu-search';
const DropdownMenuContent = ({
  options,
  footerOption,
  onSelect = () => {},
  isSectioned,
  isMultiLevel = false,
  isMultiLevelSectioned = false,
  closeDropdown = () => {},
  handleSearch,
  searchId = SEARCH_ID,
  showSearch,
  searchPlaceholderText = '',
  searchAutoComplete,
  searchQuery = '',
  showNoResults,
  noResultsText = '',
  contentClassName = '',
  selectedKey,
  selectedItem,
  contentTestId,
  renderCustomHeader = null,
  labelledBy,
  LinkComponent
}) => {
  const isFooterMultiLevel = !!footerOption?.subItems?.length;
  const showFooterOption = footerOption && footerOption.isShown !== false;
  const {
    treeItemAttrs: searchAttrs,
    ref: setRefCallback
  } = useTreeNodeNavigation({
    id: searchId,
    getKeyActionFn: getKeyActionFnSearch,
    onCustomButtonKeyDown: () => closeDropdown(),
    ignoreKeys: [KEYS.SPACE, KEYS.LEFT, KEYS.RIGHT]
  });
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [showSearch && /*#__PURE__*/_jsx(Search, {
      onChange: handleSearch,
      value: searchQuery,
      placeholder: searchPlaceholderText,
      autoComplete: searchAutoComplete,
      className: "dropdown-search",
      testId: "dropdown-menu-search",
      id: searchId,
      autoFocus: false,
      ref: setRefCallback,
      onKeyDown: searchAttrs.onKeyDown
    }), renderCustomHeader && renderCustomHeader(), showNoResults && /*#__PURE__*/_jsx("span", {
      className: "no-results-message",
      "test-id": "dropdown-menu-no-results-message",
      children: noResultsText
    }), !showNoResults && /*#__PURE__*/_jsx(DropdownList, {
      options: options,
      onCloseDropdown: closeDropdown,
      selectedKey: selectedKey,
      selectedItem: selectedItem,
      onSelect: onSelect,
      contentTestId: contentTestId,
      contentClassName: contentClassName,
      isMultiLevel: isMultiLevel,
      isMultiLevelSectioned: isMultiLevelSectioned,
      isSectioned: isSectioned,
      labelledBy: labelledBy,
      LinkComponent: LinkComponent
    }), showFooterOption && isFooterMultiLevel && /*#__PURE__*/_jsx(DropdownMenuMultiLevelList, {
      closeDropdown: closeDropdown,
      selectedOption: selectedItem,
      options: [footerOption],
      onSelect: onSelect,
      contentTestId: "footer-multi-level-content",
      contentClassName: "dropdown-menu-footer",
      LinkComponent: LinkComponent
    }), showFooterOption && !isFooterMultiLevel && /*#__PURE__*/_jsx("ul", {
      className: "dropdown-menu-footer",
      role: "menu",
      children: /*#__PURE__*/_jsx(DropdownItem, {
        option: footerOption,
        onSelect: onSelect,
        onCloseDropdown: closeDropdown,
        LinkComponent: LinkComponent
      })
    })]
  });
};
DropdownMenuContent.displayName = 'DropdownMenuContent';
export default DropdownMenuContent;