import React, { useMemo } from 'react';
import classNames from 'classnames';
import { SUB_NAVIGATION_ACCENT_TYPES, SUB_NAVIGATION_ACCENT_SIZES } from './types';
import { SubNavigationItem } from './sub-navigation-item';
import { SubNavigationItemLink } from './sub-navigation-item-link';
import { AdaptiveList } from '../adaptive-list';
import { jsx as _jsx } from "react/jsx-runtime";
/** Sub navigation bars display items with label text. When label tapped, the user is taken to the navigation destination
 * [CAPITALIZATION] Use title case
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const SubNavigation = ({
  navigationItems,
  activeTab,
  testId,
  onSelect = () => {},
  customClassName = '',
  LinkComponent = SubNavigationItemLink,
  accentType = SUB_NAVIGATION_ACCENT_TYPES.INLINE,
  size = SUB_NAVIGATION_ACCENT_SIZES.SMALL,
  isAdaptive = false,
  isUnderlined = false
}) => {
  const options = useMemo(() => {
    return navigationItems.map(navigationItem => ({
      title: navigationItem.label,
      ...navigationItem
    })).filter(({
      isShown
    }) => isShown !== false);
  }, [navigationItems]);
  const hasLink = navigationItems.some(item => item.route || item.indexRoute);
  return /*#__PURE__*/_jsx("div", {
    className: classNames('sub-nav-group', accentType, size, customClassName, {
      underlined: isUnderlined
    }),
    "test-id": testId,
    role: !isAdaptive && !hasLink ? 'tablist' : undefined // AdaptiveList applies it's own tablist role
    ,
    children: isAdaptive ? /*#__PURE__*/_jsx(AdaptiveList, {
      selected: activeTab,
      onSelect: option => onSelect(option),
      options: options,
      isSubNavItem: !hasLink,
      Component: ({
        option
      }) => /*#__PURE__*/_jsx(SubNavigationItem, {
        item: option,
        selectedTabKey: activeTab,
        onSelect: onSelect,
        LinkComponent: LinkComponent,
        hasLink: hasLink
      })
    }) : navigationItems.map(item => /*#__PURE__*/_jsx(SubNavigationItem, {
      hasLink: hasLink,
      item: item,
      selectedTabKey: activeTab,
      onSelect: onSelect,
      LinkComponent: LinkComponent
    }, item.key))
  });
};