import React, { useEffect } from 'react';
import classNames from 'classnames';
import isEqual from 'lodash-es/isEqual';
import { useListboxAttrs } from '../../../hooks/use-listbox-attrs';
import { useTreeNodeNavigation } from '../../../hooks';
import { getKeyActionFnMenu } from '../../../hooks/use-tree-navigation/utils';
import { MENU_ROLE } from '../../../dropdown-menu/types';
import { jsx as _jsx } from "react/jsx-runtime";
export function TextTypeDropdownItem({
  index,
  option,
  selectedKey,
  optionsSize,
  handleSelect = () => {},
  closeDropdown = () => {}
}) {
  const {
    node,
    treeItemAttrs,
    setFocused,
    isFirstFocusable,
    ref
  } = useTreeNodeNavigation({
    id: option.privateKey || option.key,
    getKeyActionFn: getKeyActionFnMenu,
    onCustomButtonKeyDown: () => closeDropdown(),
    onToggleSelected: isSelected => {
      if (isSelected) {
        handleSelect?.();
      }
    }
  });
  useEffect(() => {
    if (selectedKey && isEqual(option.key, selectedKey) || !selectedKey && isFirstFocusable) {
      setFocused(node.id);
    }
  }, [option, selectedKey, isFirstFocusable]);
  const {
    getOptionAttrs
  } = useListboxAttrs();
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
    _jsx("li", {
      ref: ref,
      "test-id": option.testId,
      className: classNames('text-type-dropdown-content-item', {
        active: selectedKey === option.key,
        focused: node.isFocused
      }),
      ...getOptionAttrs({
        isSelected: selectedKey === option.key,
        onClick: handleSelect,
        position: index + 1,
        size: optionsSize
      }),
      onKeyDown: treeItemAttrs.onKeyDown,
      role: MENU_ROLE.MENUITEM,
      children: /*#__PURE__*/_jsx("span", {
        className: option.className,
        children: option.title
      })
    }, option.key)
  );
}