import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
//@ts-nocheck
import { defineComponent, computed } from "vue";
import Tooltip from "../tooltip";
import MenuItemContent from "./MenuItemContent";
import { useMenu } from "./utils";
export const menuItemProps = {
  node: Object,
  label: [String, Object],
  value: [String, Number],
  icon: Object,
  disabled: Boolean
};
export default defineComponent({
  name: 'x-menu-item',
  props: menuItemProps,

  setup(props) {
    const {
      paddingLeftRef,
      menuContext,
      disabledRef,
      isActiveRef,
      isRoot
    } = useMenu(props);
    const prefixCls = 'x-menu-item';
    const selectedRef = computed(() => menuContext.valueRef.value === props.value);

    function onClick() {
      menuContext.onSelect(props.node);
    }

    return () => {
      const cls = {
        [prefixCls]: true,
        [`${prefixCls}-selected`]: selectedRef.value,
        [`${prefixCls}-disabled`]: disabledRef.value
      };
      return _createVNode(Tooltip, {
        "disabled": !isRoot || disabledRef.value || !menuContext.collapsedRef.value,
        "placement": "right",
        "title": props.label
      }, {
        default: () => [_createVNode("div", {
          "class": cls,
          "role": "menuitem",
          "aria-disabled": disabledRef.value
        }, [_createVNode(MenuItemContent, _mergeProps(props, {
          "style": `paddingLeft:${paddingLeftRef.value}px`,
          "active": isActiveRef.value,
          "onClick": onClick
        }), null)])]
      });
    };
  }

});