import React, { useEffect } from 'react';
import { MENU_ROLE } from './types';
import { useTreeNodeNavigation } from '../hooks';
import { RadioButton } from '../radio-button';
import { getKeyActionFnMenu } from '../hooks/use-tree-navigation/utils';
import DropdownItemTooltip from './dropdown-item-tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
export const DropdownItemRadioButton = ({
  groupIdentifier,
  option,
  onChange,
  onCloseDropdown = () => {}
}) => {
  const {
    treeItemAttrs,
    ref: setRefCallback,
    node,
    isFirstFocusable,
    setFocused
  } = useTreeNodeNavigation({
    id: option.privateKey || option.key,
    getKeyActionFn: getKeyActionFnMenu,
    onCustomButtonKeyDown: () => onCloseDropdown(),
    onToggleSelected: () => {
      onChange(option);
    },
    ignoreKeys: null
  });
  useEffect(() => {
    if (isFirstFocusable) {
      setFocused(node.id);
    }
  }, [setFocused, isFirstFocusable]);
  return /*#__PURE__*/_jsx(DropdownItemTooltip, {
    option: option,
    children: /*#__PURE__*/_jsx("li", {
      className: "drop-item radio-button",
      role: "none",
      children: /*#__PURE__*/_jsx(RadioButton, {
        ref: setRefCallback,
        option: option,
        onSelect: () => onChange(option),
        checked: option.activeItemId === option.id,
        groupIdentifier: groupIdentifier,
        radioButtonRole: MENU_ROLE.MENUITEMRADIO,
        onKeyDown: treeItemAttrs.onKeyDown
      }, option.key)
    })
  });
};