"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const IconButton = require("../base/IconButton.vue2.js");
const vClickOutside = require("../base/vClickOutside.js");
const _hoisted_1 = {
  key: 1,
  class: "more-button-wrapper"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  props: {
    breakpoint: { default: 1300 }
  },
  setup(__props) {
    const props = __props;
    const { t } = uikitBaseComponentVue3.useUIKit();
    const containerRef = vue.ref(null);
    const shouldShowAllButtons = vue.ref(true);
    const showMenu = vue.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;
    vue.onMounted(() => {
      updateButtonDisplay();
      const roomPage = document.getElementById("roomPage");
      if (roomPage) {
        resizeObserver = new ResizeObserver(updateButtonDisplay);
        resizeObserver.observe(roomPage);
      }
    });
    vue.onUnmounted(() => {
      if (resizeObserver) {
        const roomPage = document.getElementById("roomPage");
        if (roomPage) {
          resizeObserver.unobserve(roomPage);
        }
        resizeObserver.disconnect();
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "more-button-container"
      }, [
        shouldShowAllButtons.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
          vue.createVNode(IconButton.default, {
            "is-active": showMenu.value,
            title: vue.unref(t)("RoomMore.Title"),
            onClickIcon: toggleMenu
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(vue.unref(uikitBaseComponentVue3.IconMore), { size: 24 })
            ]),
            _: 1
          }, 8, ["is-active", "title"]),
          vue.createVNode(vue.Transition, { name: "menu-fade" }, {
            default: vue.withCtx(() => [
              vue.withDirectives(vue.createElementVNode("div", {
                class: "dropdown-menu",
                onClick: handleClickOutside
              }, [
                vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
              ], 512), [
                [vue.vShow, showMenu.value]
              ])
            ]),
            _: 3
          })
        ])), [
          [vue.unref(vClickOutside.default), handleClickOutside]
        ])
      ], 512);
    };
  }
});
exports.default = _sfc_main;
