import { defineComponent, ref, computed, createElementBlock, openBlock, Fragment, createVNode, withCtx, unref, createElementVNode, toDisplayString } from "vue";
import { useUIKit, IconManageMember, TUIPopup } from "@tencentcloud/uikit-base-component-vue3";
import { useRoomState, RoomParticipantListH5 } from "tuikit-atomicx-vue3/room";
import IconButtonH5 from "../base/IconButtonH5.vue2.mjs";
import PopUpArrowDown from "../base/PopUpArrowDown.vue2.mjs";
const _hoisted_1 = { class: "participant-list-content" };
const _hoisted_2 = { class: "participant-list-header" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { t } = useUIKit();
    const { currentRoom } = useRoomState();
    const isPopupVisible = ref(false);
    const title = computed(() => {
      var _a;
      if (!currentRoom.value) {
        return t("Participant.Title");
      }
      return `${t("Participant.Title")}(${(_a = currentRoom.value) == null ? void 0 : _a.participantCount})`;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createVNode(IconButtonH5, {
          title: title.value,
          onClick: _cache[0] || (_cache[0] = ($event) => isPopupVisible.value = true)
        }, {
          default: withCtx(() => [
            createVNode(unref(IconManageMember), { size: "24" })
          ]),
          _: 1
        }, 8, ["title"]),
        createVNode(unref(TUIPopup), {
          visible: isPopupVisible.value,
          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => isPopupVisible.value = $event),
          height: "90%"
        }, {
          default: withCtx(() => [
            createElementVNode("div", _hoisted_1, [
              createVNode(PopUpArrowDown, {
                onClick: _cache[1] || (_cache[1] = ($event) => isPopupVisible.value = false)
              }),
              createElementVNode("div", _hoisted_2, toDisplayString(title.value), 1),
              createVNode(unref(RoomParticipantListH5))
            ])
          ]),
          _: 1
        }, 8, ["visible"])
      ], 64);
    };
  }
});
export {
  _sfc_main as default
};
