import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { defineComponent, provide, computed } from "vue";
import { createItem, useMenu } from "./utils"; // import { omit } from 'lodash-es'

import { omit } from "../_util/_";
import Trigger from "../trigger";
import MenuItemContent from "./MenuItemContent";
import ExpandTransition from "../expand-transition";
export const submenuProps = {
  node: Object,
  label: [String, Object],
  value: [String, Number],
  children: Array,
  icon: Object,
  disabled: Boolean
};
export const submenuContextKey = Symbol("submenu");
export default defineComponent({
  name: 'x-submenu',
  props: submenuProps,

  setup(props) {
    const {
      paddingLeftRef,
      menuContext,
      horizontalRef,
      inlineRef,
      isActiveRef,
      disabledRef,
      isRoot
    } = useMenu(props);
    const collapsedRef = computed(() => !menuContext.expandedKeysRef.value.includes(props.value));

    function onClick() {
      if (disabledRef.value || menuContext.collapsedRef.value || !inlineRef.value) return;
      menuContext.onExpanded(props.node);
    }

    function onPopupVisibleChange(visible) {
      menuContext.onExpanded(props.node);
    }

    function getPopupContainer() {
      return isRoot && horizontalRef.value ? null : el => el.parentNode;
    }

    provide(submenuContextKey, {
      props,
      paddingLeftRef
    });
    return () => {
      const prefixCls = 'x-submenu';
      const horizontal = horizontalRef.value;
      const inline = inlineRef.value;
      const menuCollapsed = menuContext.collapsedRef.value;
      const collapsed = collapsedRef.value;

      const contentNode = _createVNode(MenuItemContent, _mergeProps(omit(props, 'children'), {
        "showArrow": !menuCollapsed || !isRoot,
        "collapsed": collapsed,
        "style": `paddingLeft:${paddingLeftRef.value}px`,
        "active": isActiveRef.value,
        "onClick": onClick
      }), null);

      const childrenNode = _createVNode(ExpandTransition, null, {
        default: () => [_withDirectives(_createVNode("div", {
          "class": `${prefixCls}_children`,
          "role": "menu"
        }, [props.children.map(createItem)]), [[_vShow, !collapsed]])]
      });

      const popupNode = _createVNode("div", {
        "class": `${prefixCls}_children`,
        "role": "menu"
      }, [props.children.map(createItem)]);

      return _createVNode(Trigger, {
        "prefixCls": prefixCls,
        "disabled": disabledRef.value || (!(horizontal || menuCollapsed) ? inline : false),
        "action": "hover",
        "popup": popupNode,
        "popupVisible": !collapsed,
        "onPopupVisibleChange": onPopupVisibleChange,
        "popupClass": `${prefixCls}-popup`,
        "popupPlacement": horizontal && isRoot ? "bottom" : "rightTop",
        "getPopupContainer": getPopupContainer()
      }, {
        default: () => [_createVNode("div", {
          "class": prefixCls,
          "role": "menuitem",
          "aria-expanded": !collapsed,
          "aria-disabled": disabledRef.value
        }, [contentNode, !(menuCollapsed || horizontal || !inline) && childrenNode])]
      });
    };
  }

});