import React from 'react';
import classNames from 'classnames';
import { SubNavigationItemContent } from './sub-navigation-item-content';
import { Button, ACCENT_TYPES, BUTTON_TYPES } from '../button';
import { TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
export const SubNavigationItem = ({
  item,
  selectedTabKey,
  LinkComponent,
  hasLink,
  onSelect = () => {}
}) => {
  const isShown = item.isShown === undefined ? true : item.isShown;
  const className = classNames('sub-nav-item header-sub-navigation item-button', item.customClassName);
  if (!isShown) {
    return null;
  }
  const ariaAttr = {
    'aria-selected': item.key === selectedTabKey,
    role: 'tab'
  };
  if (item.route || item.indexRoute) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      _jsx(LinkComponent, {
        item: item,
        className: className,
        onSelect: onSelect
      })
    );
  }
  return /*#__PURE__*/_jsx(Button, {
    type: BUTTON_TYPES.BUTTON,
    accentType: ACCENT_TYPES.COMMAND,
    testId: item.testId,
    tourId: item.tourId,
    className: classNames(className, {
      active: item.key === selectedTabKey
    }),
    onClick: () => onSelect(item),
    isDisabled: item.disabled,
    tooltipText: item.toolTip,
    tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.BOTTOM,
    tooltipDocsLink: item.docsLink,
    ...(!hasLink ? ariaAttr : {}),
    children: /*#__PURE__*/_jsx(SubNavigationItemContent, {
      label: item.label,
      leftElement: item.leftElement,
      rightElement: item.rightElement
    })
  });
};