import React from 'react';
import { Checkbox } from '../checkbox';
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 DropdownItemCheckbox = ({
  option,
  onChange,
  onCloseDropdown = () => {}
}) => {
  const {
    disabled,
    id,
    isChecked = false,
    title,
    testId,
    tooltipPlacement,
    tooltipText,
    subtext
  } = option;
  const {
    treeItemAttrs,
    ref: setRefCallback
  } = useTreeNodeNavigation({
    id: option.privateKey || option.key,
    isSelected: isChecked,
    getKeyActionFn: getKeyActionFnMenu,
    onCustomButtonKeyDown: () => onCloseDropdown(),
    onToggleSelected: onChange,
    ignoreKeys: null
  });
  return (
    /*#__PURE__*/
    // div around Checkbox is needed to comply with the dropdown-item layout.
    // this way we can keep css simple and avoid overrides.
    _jsx(DropdownItemTooltip, {
      option: option,
      children: /*#__PURE__*/_jsx("div", {
        className: "checkbox-item",
        children: /*#__PURE__*/_jsx(Checkbox, {
          ref: setRefCallback,
          isTruncatable: true,
          id: id,
          testId: testId,
          isChecked: isChecked,
          onChange: onChange,
          labelText: title,
          subtext: subtext ? String(subtext) : undefined,
          isDisabled: disabled,
          tooltipPlacement: tooltipPlacement,
          onKeyDown: treeItemAttrs.onKeyDown,
          role: MENU_ROLE.MENUITEMCHECKBOX,
          hasParentTooltip: !!tooltipText
        })
      })
    })
  );
};
export default DropdownItemCheckbox;