import React from 'react';
import DropdownItemTitle from './dropdown-item-title';
import { MENU_ROLE } from './types';
import { useTreeNodeNavigation } from '../hooks';
import { getKeyActionFnMenu } from '../hooks/use-tree-navigation/utils';
import DropdownItemTooltip from './dropdown-item-tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
const DropdownItemLink = ({
  option,
  onClick = () => {},
  onMouseLeave = () => {},
  onMouseEnter = () => {},
  onCloseDropdown = () => {},
  LinkComponent: PropsLinkComponent
}) => {
  const {
    disabled,
    link,
    testId,
    isExternal,
    LinkComponent: OptionLinkComponent
  } = option;
  const LinkComponent = OptionLinkComponent || PropsLinkComponent;
  const {
    treeItemAttrs,
    ref: setRefCallback
  } = useTreeNodeNavigation({
    id: option.privateKey || option.key,
    getKeyActionFn: getKeyActionFnMenu,
    onCustomButtonKeyDown: () => onCloseDropdown(),
    onToggleSelected: onClick,
    ignoreKeys: null,
    preventDefault: false
  });
  return /*#__PURE__*/_jsx(DropdownItemTooltip, {
    option: option,
    children: /*#__PURE__*/_jsx(LinkComponent, {
      className: "drop-link",
      ref: setRefCallback,
      rel: "noopener noreferrer",
      "test-id": testId,
      onClick: onClick,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      onKeyDown: treeItemAttrs.onKeyDown,
      onBlur: treeItemAttrs.onBlur,
      onFocus: treeItemAttrs.onFocus,
      target: isExternal ? '_blank' : undefined,
      href: disabled ? undefined : link,
      role: MENU_ROLE.MENUITEM,
      option: option,
      children: /*#__PURE__*/_jsx(DropdownItemTitle, {
        option: option
      })
    })
  });
};
export default DropdownItemLink;