'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var CloseOutlined = require('@ant-design/icons-vue');
require('../../../menu/index.js');
require('../../../vc-dropdown/index.js');
var type = require('../../../_util/type.js');
var KeyCode = require('../../../_util/KeyCode.js');
var classNames = require('../../../_util/classNames.js');
var index = require('../../../_util/vue-types/index.js');
require('../../../hooks/index.js');
var OverrideContext = require('../../../menu/src/OverrideContext.js');
var AddButton = require('./AddButton.js');
var useState = require('../../../hooks/useState.js');
var Dropdown = require('../../../vc-dropdown/Dropdown.js');
var Menu = require('../../../menu/src/Menu.js');
var MenuItem = require('../../../menu/src/MenuItem.js');

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const operationNodeProps = {
  prefixCls: {
    type: String
  },
  id: {
    type: String
  },
  tabs: {
    type: Object
  },
  rtl: {
    type: Boolean
  },
  tabBarGutter: {
    type: Number
  },
  activeKey: {
    type: [String, Number]
  },
  mobile: {
    type: Boolean
  },
  moreIcon: index.default.any,
  moreTransitionName: {
    type: String
  },
  editable: {
    type: Object
  },
  locale: {
    type: Object,
    default: void 0
  },
  removeAriaLabel: String,
  onTabClick: {
    type: Function
  },
  popupClassName: String,
  getPopupContainer: type.functionType()
};
var OperationNode = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "OperationNode",
  inheritAttrs: false,
  props: operationNodeProps,
  emits: ["tabClick"],
  slots: Object,
  setup(props, {
    attrs,
    slots
  }) {
    const [open, setOpen] = useState.useState(false);
    const [selectedKey, setSelectedKey] = useState.useState(null);
    const selectOffset = (offset) => {
      const enabledTabs = props.tabs.filter((tab) => !tab.disabled);
      let selectedIndex = enabledTabs.findIndex((tab) => tab.key === selectedKey.value) || 0;
      const len = enabledTabs.length;
      for (let i = 0; i < len; i += 1) {
        selectedIndex = (selectedIndex + offset + len) % len;
        const tab = enabledTabs[selectedIndex];
        if (!tab.disabled) {
          setSelectedKey(tab.key);
          return;
        }
      }
    };
    const onKeyDown = (e) => {
      const {
        which
      } = e;
      if (!open.value) {
        if ([KeyCode.default.DOWN, KeyCode.default.SPACE, KeyCode.default.ENTER].includes(which)) {
          setOpen(true);
          e.preventDefault();
        }
        return;
      }
      switch (which) {
        case KeyCode.default.UP:
          selectOffset(-1);
          e.preventDefault();
          break;
        case KeyCode.default.DOWN:
          selectOffset(1);
          e.preventDefault();
          break;
        case KeyCode.default.ESC:
          setOpen(false);
          break;
        case KeyCode.default.SPACE:
        case KeyCode.default.ENTER:
          if (selectedKey.value !== null)
            props.onTabClick(selectedKey.value, e);
          break;
      }
    };
    const popupId = vue.computed(() => `${props.id}-more-popup`);
    const selectedItemId = vue.computed(() => selectedKey.value !== null ? `${popupId.value}-${selectedKey.value}` : null);
    const onRemoveTab = (event, key) => {
      event.preventDefault();
      event.stopPropagation();
      props.editable.onEdit("remove", {
        key,
        event
      });
    };
    vue.onMounted(() => {
      vue.watch(selectedKey, () => {
        const ele = document.getElementById(selectedItemId.value);
        if (ele && ele.scrollIntoView)
          ele.scrollIntoView(false);
      }, {
        flush: "post",
        immediate: true
      });
    });
    vue.watch(open, () => {
      if (!open.value)
        setSelectedKey(null);
    });
    OverrideContext.useProvideOverride({});
    return () => {
      var _a;
      const {
        prefixCls,
        id,
        tabs,
        locale,
        mobile,
        moreIcon = ((_a = slots.moreIcon) == null ? void 0 : _a.call(slots)) || vue.createVNode(CloseOutlined.EllipsisOutlined, null, null),
        moreTransitionName,
        editable,
        tabBarGutter,
        rtl,
        onTabClick,
        popupClassName
      } = props;
      const dropdownPrefix = `${prefixCls}-dropdown`;
      const dropdownAriaLabel = locale == null ? void 0 : locale.dropdownAriaLabel;
      const moreStyle = {
        [rtl ? "marginRight" : "marginLeft"]: tabBarGutter
      };
      if (!tabs.length) {
        moreStyle.visibility = "hidden";
        moreStyle.order = 1;
      }
      const overlayClassName = classNames.default({
        [`${dropdownPrefix}-rtl`]: rtl,
        [`${popupClassName}`]: true
      });
      const moreNode = mobile ? null : vue.createVNode(Dropdown.default, {
        "prefixCls": dropdownPrefix,
        "trigger": ["hover"],
        "visible": open.value,
        "transitionName": moreTransitionName,
        "onVisibleChange": setOpen,
        "overlayClassName": overlayClassName,
        "mouseEnterDelay": 0.1,
        "mouseLeaveDelay": 0.1,
        "getPopupContainer": props.getPopupContainer
      }, {
        overlay: () => {
          let _slot;
          return vue.createVNode(Menu.default, {
            "onClick": ({
              key,
              domEvent
            }) => {
              onTabClick(key, domEvent);
              setOpen(false);
            },
            "id": popupId.value,
            "tabindex": -1,
            "role": "listbox",
            "aria-activedescendant": selectedItemId.value,
            "selectedKeys": [selectedKey.value],
            "aria-label": dropdownAriaLabel !== void 0 ? dropdownAriaLabel : "expanded dropdown"
          }, _isSlot(_slot = tabs.map((tab) => {
            const removable = editable && tab.closable !== false && !tab.disabled;
            return vue.createVNode(MenuItem.default, {
              "key": tab.key,
              "id": `${popupId.value}-${tab.key}`,
              "role": "option",
              "aria-controls": id && `${id}-panel-${tab.key}`,
              "disabled": tab.disabled
            }, {
              default: () => {
                var _a2, _b;
                return [vue.createVNode("span", null, [typeof tab.tab === "function" ? tab.tab() : tab.tab]), removable && vue.createVNode("button", {
                  "type": "button",
                  "aria-label": props.removeAriaLabel || "remove",
                  "tabindex": 0,
                  "class": `${dropdownPrefix}-menu-item-remove`,
                  "onClick": (e) => {
                    e.stopPropagation();
                    onRemoveTab(e, tab.key);
                  }
                }, [((_a2 = tab.closeIcon) == null ? void 0 : _a2.call(tab)) || ((_b = editable.removeIcon) == null ? void 0 : _b.call(editable)) || "\xD7"])];
              }
            });
          })) ? _slot : {
            default: () => [_slot]
          });
        },
        default: () => vue.createVNode("button", {
          "type": "button",
          "class": `${prefixCls}-nav-more`,
          "style": moreStyle,
          "tabindex": -1,
          "aria-hidden": "true",
          "aria-haspopup": "listbox",
          "aria-controls": popupId.value,
          "id": `${id}-more`,
          "aria-expanded": open.value,
          "onKeydown": onKeyDown
        }, [moreIcon])
      });
      return vue.createVNode("div", {
        "class": classNames.default(`${prefixCls}-nav-operations`, attrs.class),
        "style": attrs.style
      }, [moreNode, vue.createVNode(AddButton.default, {
        "prefixCls": prefixCls,
        "locale": locale,
        "editable": editable
      }, null)]);
    };
  }
});

exports.default = OperationNode;
exports.operationNodeProps = operationNodeProps;
//# sourceMappingURL=OperationNode.js.map
