import { defineComponent, ref, onMounted, onUnmounted, createElementBlock, openBlock, renderSlot, withDirectives, createVNode, unref, withCtx, Transition, createElementVNode, vShow } from "vue";
import { useUIKit, IconMore } from "@tencentcloud/uikit-base-component-vue3";
import IconButton from "../base/IconButton.vue2.mjs";
import vClickOutside from "../base/vClickOutside.mjs";
const _hoisted_1 = {
  key: 1,
  class: "more-button-wrapper"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    breakpoint: { default: 1300 }
  },
  setup(__props) {
    const props = __props;
    const { t } = useUIKit();
    const containerRef = ref(null);
    const shouldShowAllButtons = ref(true);
    const showMenu = ref(false);
    const updateButtonDisplay = () => {
      const roomPage = document.getElementById("roomPage");
      if (roomPage) {
        const roomPageWidth = roomPage.offsetWidth;
        shouldShowAllButtons.value = roomPageWidth >= props.breakpoint;
      }
    };
    function toggleMenu() {
      showMenu.value = !showMenu.value;
    }
    function handleClickOutside() {
      showMenu.value = false;
    }
    let resizeObserver = null;
    onMounted(() => {
      updateButtonDisplay();
      const roomPage = document.getElementById("roomPage");
      if (roomPage) {
        resizeObserver = new ResizeObserver(updateButtonDisplay);
        resizeObserver.observe(roomPage);
      }
    });
    onUnmounted(() => {
      if (resizeObserver) {
        const roomPage = document.getElementById("roomPage");
        if (roomPage) {
          resizeObserver.unobserve(roomPage);
        }
        resizeObserver.disconnect();
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "more-button-container"
      }, [
        shouldShowAllButtons.value ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
          createVNode(IconButton, {
            "is-active": showMenu.value,
            title: unref(t)("RoomMore.Title"),
            onClickIcon: toggleMenu
          }, {
            default: withCtx(() => [
              createVNode(unref(IconMore), { size: 24 })
            ]),
            _: 1
          }, 8, ["is-active", "title"]),
          createVNode(Transition, { name: "menu-fade" }, {
            default: withCtx(() => [
              withDirectives(createElementVNode("div", {
                class: "dropdown-menu",
                onClick: handleClickOutside
              }, [
                renderSlot(_ctx.$slots, "default", {}, void 0, true)
              ], 512), [
                [vShow, showMenu.value]
              ])
            ]),
            _: 3
          })
        ])), [
          [unref(vClickOutside), handleClickOutside]
        ])
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
