import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
import { MenuUnstyledContext } from '../MenuUnstyled';
import { useButton } from '../ButtonUnstyled';
export default function useMenuItem(props) {
  var component = props.component,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      ref = props.ref;
  var id = useId();
  var menuContext = React.useContext(MenuUnstyledContext);
  var itemRef = React.useRef(null);
  var handleRef = useForkRef(itemRef, ref);

  if (menuContext === null) {
    throw new Error('MenuItemUnstyled must be used within a MenuUnstyled');
  }

  var registerItem = menuContext.registerItem,
      unregisterItem = menuContext.unregisterItem,
      open = menuContext.open;
  React.useEffect(function () {
    if (id === undefined) {
      return undefined;
    }

    registerItem(id, {
      disabled: disabled,
      id: id,
      ref: itemRef
    });
    return function () {
      return unregisterItem(id);
    };
  }, [id, registerItem, unregisterItem, disabled, ref]);

  var _useButton = useButton({
    component: component,
    ref: handleRef,
    disabled: disabled
  }),
      getButtonProps = _useButton.getRootProps,
      focusVisible = _useButton.focusVisible; // Ensure the menu item is focused when highlighted


  var _React$useState = React.useState(false),
      focusRequested = _React$useState[0],
      requestFocus = _React$useState[1];

  var focusIfRequested = React.useCallback(function () {
    if (focusRequested && itemRef.current != null) {
      itemRef.current.focus();
      requestFocus(false);
    }
  }, [focusRequested]);
  React.useEffect(function () {
    focusIfRequested();
  });
  React.useDebugValue({
    id: id,
    disabled: disabled
  });
  var itemState = menuContext.getItemState(id != null ? id : '');

  var _ref = itemState != null ? itemState : {
    highlighted: false
  },
      highlighted = _ref.highlighted;

  React.useEffect(function () {
    requestFocus(highlighted && open);
  }, [highlighted, open]);

  if (id === undefined) {
    return {
      getRootProps: function getRootProps(other) {
        return _extends({}, other, getButtonProps(other), {
          role: 'menuitem'
        });
      },
      itemState: null,
      focusVisible: focusVisible
    };
  }

  return {
    getRootProps: function getRootProps(other) {
      var optionProps = menuContext.getItemProps(id, other);
      return _extends({}, other, getButtonProps(other), {
        tabIndex: optionProps.tabIndex,
        id: optionProps.id,
        role: 'menuitem'
      });
    },
    itemState: itemState,
    focusVisible: focusVisible
  };
}