import { defineComponent, ref, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
import MoreButtonH5 from "./MoreButton.vue2.mjs";
const BUTTON_ITEM_WIDTH = 52;
const BUTTON_ITEM_GAP = 10;
const MORE_BUTTON_WIDTH = 33;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const controlBarRef = ref(null);
    const controlButtonsRef = ref(null);
    const showMoreButton = ref(false);
    const showMoreMenu = ref(false);
    function calculateMaxItems(width) {
      if (width <= 0) {
        return 0;
      }
      return Math.floor((width + BUTTON_ITEM_GAP) / (BUTTON_ITEM_WIDTH + BUTTON_ITEM_GAP));
    }
    function calculateButtonsWidth() {
      if (!controlBarRef.value || !controlButtonsRef.value) {
        return;
      }
      const width = controlBarRef.value.offsetWidth;
      const itemsCount = controlButtonsRef.value.children.length;
      const maxItems = calculateMaxItems(width);
      let showCount = itemsCount;
      if (maxItems < itemsCount) {
        showCount = calculateMaxItems(width - MORE_BUTTON_WIDTH - BUTTON_ITEM_GAP);
        showMoreButton.value = true;
      } else {
        showMoreButton.value = false;
        showMoreMenu.value = false;
      }
      controlButtonsRef.value.style.width = `${showCount * BUTTON_ITEM_WIDTH + (showCount - 1) * BUTTON_ITEM_GAP}px`;
    }
    function toggleMoreButton() {
      showMoreMenu.value = !showMoreMenu.value;
    }
    let resizeObserver = null;
    let mutationObserver = null;
    onMounted(() => {
      calculateButtonsWidth();
      if (controlBarRef.value) {
        resizeObserver = new ResizeObserver(() => {
          calculateButtonsWidth();
        });
        resizeObserver.observe(controlBarRef.value);
      }
      if (controlButtonsRef.value) {
        mutationObserver = new MutationObserver(() => {
          calculateButtonsWidth();
        });
        mutationObserver.observe(controlButtonsRef.value, {
          childList: true,
          subtree: false
        });
      }
    });
    onUnmounted(() => {
      if (resizeObserver) {
        resizeObserver.disconnect();
        resizeObserver = null;
      }
      if (mutationObserver) {
        mutationObserver.disconnect();
        mutationObserver = null;
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["expand-footer-h5", { "show-more-menu": showMoreMenu.value }])
      }, [
        createElementVNode("div", {
          ref_key: "controlBarRef",
          ref: controlBarRef,
          class: normalizeClass(["control-bar", { "hide-more-menu": !showMoreMenu.value }])
        }, [
          createElementVNode("div", {
            ref_key: "controlButtonsRef",
            ref: controlButtonsRef,
            class: "control-buttons"
          }, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ], 512),
          showMoreButton.value ? (openBlock(), createBlock(MoreButtonH5, {
            key: 0,
            "show-more-menu": showMoreMenu.value,
            onToggleMoreMenu: toggleMoreButton
          }, null, 8, ["show-more-menu"])) : createCommentVNode("", true)
        ], 2)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
