import React, { useCallback, useEffect, useMemo, useState, createElement as _createElement } from 'react';
import classNames from 'classnames';
import { SidebarMenuItem } from './sidebar-menu-item';
import { getFlatOptions, getAncestorKeys, defaultLevelsConfig } from './utils';
import { SidebarMenuLink } from './sidebar-menu-link';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
/** SidebarMenu enables navigation between different pages/pieces of content
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export function SidebarMenu({
  options,
  activeKey,
  onSelect,
  onDelete,
  onEdit,
  onChange,
  className,
  testId = 'sidebar-menu',
  LinkComponent = SidebarMenuLink,
  levels = defaultLevelsConfig,
  shouldShowActiveBgOnTopLevel = true,
  editItemInputPlaceholder,
  deleteAriaLabel,
  editAriaLabel
}) {
  const {
    t
  } = useTranslation();
  const levelsConfig = {
    ...defaultLevelsConfig,
    ...levels
  };
  const flatOptions = useMemo(() => getFlatOptions(options), [options]);
  const activeAncestorKeys = useMemo(() => getAncestorKeys(flatOptions, activeKey), [flatOptions, activeKey]);
  const [expandedKeys, setExpandedKeys] = useState([activeKey, ...activeAncestorKeys]);
  useEffect(() => {
    setExpandedKeys([activeKey, ...activeAncestorKeys]);
  }, [flatOptions, activeKey, activeAncestorKeys]);
  const handleActiveItemChange = useCallback((e, targetKey) => {
    const option = flatOptions.find(({
      key
    }) => key === targetKey);
    const isActive = targetKey === activeKey;
    if (typeof levelsConfig !== 'undefined' && typeof option !== 'undefined' && levelsConfig?.nonSelectable?.includes(option.level)) {
      return;
    }
    if (activeAncestorKeys.includes(targetKey)) {
      setExpandedKeys(getAncestorKeys(flatOptions, targetKey));
    } else {
      const isExpanded = expandedKeys.includes(targetKey);
      setExpandedKeys(isExpanded ? getAncestorKeys(flatOptions, targetKey) : [targetKey, ...getAncestorKeys(flatOptions, targetKey)]);
    }
    if (!isActive) {
      onSelect(targetKey, e);
    }
  }, [activeAncestorKeys, expandedKeys, flatOptions, activeKey]);
  return /*#__PURE__*/_jsx("ul", {
    className: classNames('sidebar-menu', className),
    "test-id": testId,
    children: options.map(({
      key,
      validity,
      ...rest
    }) => {
      const optionTestId = rest.testId || key.toString();
      return /*#__PURE__*/_createElement(SidebarMenuItem, {
        ...rest,
        itemKey: key,
        activeKey: activeKey,
        expandedKeys: !expandedKeys ? [] : expandedKeys,
        level: 0,
        levels: levelsConfig,
        key: key,
        handleActiveItemChange: handleActiveItemChange,
        testId: optionTestId,
        LinkComponent: LinkComponent,
        shouldShowActiveBgOnTopLevel: shouldShowActiveBgOnTopLevel,
        onDelete: onDelete,
        onEdit: onEdit,
        onChange: onChange,
        validity: validity,
        editItemInputPlaceholder: editItemInputPlaceholder ?? t('Enter item value'),
        deleteAriaLabel: deleteAriaLabel ?? t('Delete'),
        editAriaLabel: editAriaLabel ?? t('Edit')
      });
    })
  });
}