/**
 * ldesign v0.4.2
 * (c) 2023 ldesign
 * @license MIT
 */

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, watchEffect, toRefs, ref, computed, reactive, provide, watch, onMounted, h, createVNode, isVNode } from 'vue';
import { EllipsisIcon } from '@ldesign/icons-vue-next';
import isFunction from 'lodash/isFunction';
import isArray from 'lodash/isArray';
import log from '../_common/js/log/log.js';
import { Tabs, TabPanel } from '../tabs/index.js';
import { usePrefixClass } from '../hooks/useConfig.js';
import useVModel from '../hooks/useVModel.js';
import useDefaultValue from '../hooks/useDefaultValue.js';
import props from './head-menu-props.js';
import _Submenu from './submenu.js';
import VMenu from './v-menu.js';
import '../utils/withInstall.js';
import '../tabs/tabs.js';
import '../hooks/tnode.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isString';
import 'lodash/isObject';
import '../tabs/tab-panel.js';
import '../hooks/useDestroyOnClose.js';
import '../tabs/tab-panel-props.js';
import '../tabs/tab-nav.js';
import 'lodash/debounce';
import '../_common/js/tabs/base.js';
import '../hooks/useListener.js';
import '../hooks/useGlobalIcon.js';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-c9c789a8.js';
import 'dayjs';
import '../hooks/useDragSort.js';
import '../tabs/props.js';
import '../tabs/tab-nav-item.js';
import '../hooks/useRipple.js';
import '../utils/set-style.js';
import '../hooks/useKeepAnimation.js';
import '../tabs/tab-nav-bar.js';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isUndefined';
import 'lodash/isNull';
import 'lodash/isNumber';
import '../common-components/fake-arrow.js';
import '../popup/index.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../utils/dom.js';
import '../utils/easing.js';
import '../_common/js/utils/set-style.js';
import '../popup/container.js';
import '../hooks/useResizeObserver.js';
import '../popup/props.js';
import './submenu-props.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var _HeadMenu = defineComponent({
  name: "THeadMenu",
  props: _objectSpread({}, props),
  setup: function setup(props2, ctx) {
    var _ctx$slots$default, _ctx$slots, _ctx$slots$content, _ctx$slots2;
    var classPrefix = usePrefixClass();
    watchEffect(function () {
      if (ctx.slots.options) log.warnOnce("TMenu", "`options` slot is going to be deprecated, please use `operations` for slot instead.");
    });
    var _toRefs = toRefs(props2),
      value = _toRefs.value,
      modelValue = _toRefs.modelValue,
      expanded = _toRefs.expanded;
    var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange),
      _useVModel2 = _slicedToArray(_useVModel, 2),
      activeValue = _useVModel2[0],
      setActiveValue = _useVModel2[1];
    var _useDefaultValue = useDefaultValue(expanded, props2.defaultExpanded, props2.onExpand, "expanded"),
      _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
      expandValues = _useDefaultValue2[0],
      setExpanded = _useDefaultValue2[1];
    var activeValues = ref([]);
    var theme = computed(function () {
      return props2.theme;
    });
    var menuClass = computed(function () {
      return ["".concat(classPrefix.value, "-menu"), "".concat(classPrefix.value, "-head-menu"), "".concat(classPrefix.value, "-menu--").concat(props2.theme)];
    });
    var mode = ref(props2.expandType);
    var submenu = reactive([]);
    var vMenu = new VMenu({
      isMutex: true,
      expandValues: expandValues.value
    });
    provide("TdMenu", {
      mode: mode,
      theme: theme,
      vMenu: vMenu,
      isHead: true,
      expandValues: expandValues,
      activeValue: activeValue,
      activeValues: activeValues,
      select: function select(value2) {
        setActiveValue(value2);
      },
      open: function open(value2, type) {
        var expanded2 = _toConsumableArray(expandValues.value);
        var index = expanded2.indexOf(value2);
        if (mode.value === "popup") {
          if (type === "add") {
            if (index === -1) {
              expanded2.push(value2);
            }
          } else if (type === "remove") {
            expanded2.splice(index, 1);
          }
        } else if (mode.value === "normal" && value2 !== void 0) {
          expanded2.splice(0, 1);
          if (index === -1) expanded2.push(value2);
        }
        setExpanded(expanded2);
      }
    });
    var handleTabChange = function handleTabChange(value2) {
      setActiveValue(value2);
    };
    var handleSubmenuExpand = function handleSubmenuExpand(value2) {
      var ans = vMenu.getChild(value2);
      submenu.length = 0;
      submenu.push.apply(submenu, _toConsumableArray(ans));
    };
    watch(expandValues, function (value2) {
      if (mode.value === "normal") handleSubmenuExpand(value2[0]);
    });
    var updateActiveValues = function updateActiveValues(value2) {
      activeValues.value = vMenu.select(value2);
    };
    watch(activeValue, updateActiveValues);
    watch(function () {
      return props2.expandType;
    }, function (value2) {
      mode.value = value2;
    });
    onMounted(function () {
      var _expandValues$value;
      activeValues.value = vMenu.select(activeValue.value);
      if (((_expandValues$value = expandValues.value) === null || _expandValues$value === void 0 ? void 0 : _expandValues$value.length) > 0) handleSubmenuExpand(expandValues.value[0]);
    });
    var renderNormalSubmenu = function renderNormalSubmenu() {
      var _slot;
      if (submenu.length === 0) return null;
      return createVNode("ul", {
        "class": ["".concat(classPrefix.value, "-head-menu__submenu"), "".concat(classPrefix.value, "-submenu")]
      }, [createVNode(Tabs, {
        "value": activeValue.value,
        "onChange": handleTabChange
      }, _isSlot(_slot = submenu.map(function (item) {
        var _item$vnode$;
        return createVNode(TabPanel, {
          "value": item.value,
          "label": (_item$vnode$ = item.vnode()[0]) === null || _item$vnode$ === void 0 ? void 0 : _item$vnode$.children
        }, null);
      })) ? _slot : {
        "default": function _default() {
          return [_slot];
        }
      })]);
    };
    var menuRef = ref();
    var innerRef = ref();
    var logoRef = ref();
    var operationRef = ref();
    var getComputedCss = function getComputedCss(el, cssProperty) {
      var _getComputedStyle$css;
      return (_getComputedStyle$css = getComputedStyle(el)[cssProperty]) !== null && _getComputedStyle$css !== void 0 ? _getComputedStyle$css : "";
    };
    var getComputedCssValue = function getComputedCssValue(el, cssProperty) {
      return Number.parseInt(String(getComputedCss(el, cssProperty)), 10);
    };
    var calcMenuWidth = function calcMenuWidth() {
      var menuPaddingLeft = getComputedCssValue(menuRef.value, "paddingLeft");
      var menuPaddingRight = getComputedCssValue(menuRef.value, "paddingRight");
      var totalWidth = innerRef.value.clientWidth;
      if (logoRef.value) {
        var logoMarginLeft = getComputedCssValue(logoRef.value, "marginLeft");
        var logoMarginRight = getComputedCssValue(logoRef.value, "marginRight");
        totalWidth = totalWidth - logoRef.value.offsetWidth - logoMarginLeft - logoMarginRight;
      }
      if (operationRef.value) {
        var operationMarginLeft = getComputedCssValue(operationRef.value, "marginLeft");
        var operationMarginRight = getComputedCssValue(operationRef.value, "marginRight");
        totalWidth = totalWidth - operationRef.value.offsetWidth - operationMarginLeft - operationMarginRight;
      }
      return totalWidth - menuPaddingLeft - menuPaddingRight;
    };
    var initVMenu = function initVMenu(slots, parentValue) {
      slots.forEach(function (node) {
        var _node$props, _node$type, _node$type2, _node$children;
        var nodeValue = (_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.value;
        if (((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === "TSubmenu" || ((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : _node$type2.name) === "TMenuItem") vMenu.add({
          value: nodeValue,
          parent: parentValue,
          vnode: node.children["default"]
        });
        if (isFunction((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"])) {
          initVMenu(node.children["default"](), nodeValue);
          return;
        }
        if (isArray(node.children)) initVMenu(node.children, nodeValue);
      });
    };
    initVMenu(((_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)) || ((_ctx$slots$content = (_ctx$slots2 = ctx.slots).content) === null || _ctx$slots$content === void 0 ? void 0 : _ctx$slots$content.call(_ctx$slots2)) || []);
    return function () {
      var _props2$logo, _ctx$slots$logo, _ctx$slots3, _props2$operations, _ctx$slots$operations, _ctx$slots4, _ctx$slots$options, _ctx$slots5;
      var logo = ((_props2$logo = props2.logo) === null || _props2$logo === void 0 ? void 0 : _props2$logo.call(props2, h)) || ((_ctx$slots$logo = (_ctx$slots3 = ctx.slots).logo) === null || _ctx$slots$logo === void 0 ? void 0 : _ctx$slots$logo.call(_ctx$slots3));
      var operations = ((_props2$operations = props2.operations) === null || _props2$operations === void 0 ? void 0 : _props2$operations.call(props2, h)) || ((_ctx$slots$operations = (_ctx$slots4 = ctx.slots).operations) === null || _ctx$slots$operations === void 0 ? void 0 : _ctx$slots$operations.call(_ctx$slots4)) || ((_ctx$slots$options = (_ctx$slots5 = ctx.slots).options) === null || _ctx$slots$options === void 0 ? void 0 : _ctx$slots$options.call(_ctx$slots5));
      var formatContent = function formatContent() {
        var _ctx$slots$default2, _ctx$slots6, _ctx$slots$content2, _ctx$slots7;
        var slot = ((_ctx$slots$default2 = (_ctx$slots6 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots6)) || ((_ctx$slots$content2 = (_ctx$slots7 = ctx.slots).content) === null || _ctx$slots$content2 === void 0 ? void 0 : _ctx$slots$content2.call(_ctx$slots7)) || [];
        if (menuRef.value && innerRef.value) {
          var _menuRef$value$childN;
          var validNodes = Array.from((_menuRef$value$childN = menuRef.value.childNodes) !== null && _menuRef$value$childN !== void 0 ? _menuRef$value$childN : []).filter(function (item) {
            return item.nodeName !== "#text" || item.nodeValue;
          });
          var menuWidth = calcMenuWidth();
          var menuItemMinWidth = 104;
          var remainWidth = menuWidth;
          var sliceIndex = validNodes.length;
          for (var index = 0; index < validNodes.length; index++) {
            var element = validNodes[index];
            remainWidth -= element.offsetWidth || 0;
            if (remainWidth < menuItemMinWidth) {
              sliceIndex = index;
              break;
            }
          }
          var defaultSlot = slot.slice(0, sliceIndex);
          var subMore = slot.slice(sliceIndex);
          if (subMore.length) {
            slot = defaultSlot.concat(createVNode(_Submenu, {
              "expandType": "popup",
              "title": function title() {
                return createVNode(EllipsisIcon, null, null);
              }
            }, _isSlot(subMore) ? subMore : {
              "default": function _default() {
                return [subMore];
              }
            }));
          }
        }
        return slot;
      };
      var content = formatContent();
      return createVNode("div", {
        "class": menuClass.value
      }, [createVNode("div", {
        "class": "".concat(classPrefix.value, "-head-menu__inner"),
        "ref": innerRef
      }, [logo && createVNode("div", {
        "class": "".concat(classPrefix.value, "-menu__logo"),
        "ref": logoRef
      }, [logo]), createVNode("ul", {
        "class": "".concat(classPrefix.value, "-menu"),
        "ref": menuRef
      }, [content]), operations && createVNode("div", {
        "class": "".concat(classPrefix.value, "-menu__operations"),
        "ref": operationRef
      }, [operations])]), mode.value === "normal" && renderNormalSubmenu()]);
    };
  }
});

export { _HeadMenu as default };
//# sourceMappingURL=head-menu.js.map
