import { defineComponent, ref, watch, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList } from "vue";
import TUIChatEngine, { TUIStore, StoreName, TUIGroupService, TUITranslateService } from "@tencentcloud/chat-uikit-engine";
import { TUIGlobal } from "@tencentcloud/universal-api";
import "../../../../adapter-vue.mjs";
import { isH5, isPC } from "../../../../utils/env.mjs";
import BottomPopup from "../../../common/BottomPopup/index.vue.mjs";
const _hoisted_1 = {
  ref: "dialog",
  class: "member-list"
};
const _hoisted_2 = {
  key: 0,
  class: "member-list-title"
};
const _hoisted_3 = { class: "title" };
const _hoisted_4 = { class: "member-list-box" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = ["src"];
const _hoisted_7 = { class: "member-list-box-body-name" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  emits: ["onAtListOpen", "insertAt"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const emits = __emit;
    const MessageInputAt = ref();
    const memberListItems = ref();
    const showAtList = ref(false);
    const memberList = ref();
    const allMemberList = ref();
    const showMemberList = ref();
    const isGroup = ref(false);
    const position = ref({
      left: 0,
      top: 0
    });
    const selectedIndex = ref(0);
    const currentConversationID = ref("");
    const all = {
      userID: TUIChatEngine.TYPES.MSG_AT_ALL,
      nick: "所有人",
      isAll: true,
      avatar: "https://web.sdk.qcloud.com/im/assets/images/at.svg"
    };
    TUIStore.watch(StoreName.CONV, {
      currentConversationID: (id) => {
        var _a, _b;
        if (id !== currentConversationID.value) {
          currentConversationID.value = id;
          memberList.value = [];
          allMemberList.value = [];
          showMemberList.value = [];
          isGroup.value = false;
          TUIStore.update(StoreName.CUSTOM, "memberList", memberList.value);
          if ((_a = currentConversationID == null ? void 0 : currentConversationID.value) == null ? void 0 : _a.startsWith("GROUP")) {
            isGroup.value = true;
            const groupID = (_b = currentConversationID == null ? void 0 : currentConversationID.value) == null ? void 0 : _b.substring(5);
            TUIGroupService.switchGroup(groupID);
          } else {
            TUIGroupService.switchGroup("");
          }
        }
      }
    });
    TUIStore.watch(StoreName.GRP, {
      currentGroupMemberList: (list) => {
        memberList.value = list;
        allMemberList.value = [all, ...memberList.value];
        showMemberList.value = allMemberList.value;
        TUIStore.update(StoreName.CUSTOM, "memberList", memberList.value);
      }
    });
    const toggleAtList = (show) => {
      if (!isGroup.value) {
        return;
      }
      showAtList.value = show;
      if (showAtList.value) {
        emits("onAtListOpen");
      }
    };
    const handleAtListPosition = (positionData) => {
      position.value = positionData;
    };
    const setCurrentSelectIndex = (index) => {
      var _a, _b;
      selectedIndex.value = index;
      (_b = (_a = memberListItems.value) == null ? void 0 : _a[selectedIndex.value]) == null ? void 0 : _b.scrollIntoView(false);
    };
    const setShowMemberList = (list) => {
      showMemberList.value = list;
    };
    TUIGlobal.toggleAtList = toggleAtList;
    TUIGlobal.handleAtListPosition = handleAtListPosition;
    TUIGlobal.setCurrentSelectIndex = setCurrentSelectIndex;
    TUIGlobal.setShowMemberList = setShowMemberList;
    __expose({
      toggleAtList
    });
    watch(
      () => [position.value, MessageInputAt == null ? void 0 : MessageInputAt.value],
      () => {
        var _a;
        if (isH5 || !(MessageInputAt == null ? void 0 : MessageInputAt.value) || !((_a = MessageInputAt == null ? void 0 : MessageInputAt.value) == null ? void 0 : _a.style)) {
          return;
        }
        MessageInputAt.value.style.left = position.value.left + "px";
        MessageInputAt.value.style.top = position.value.top - MessageInputAt.value.clientHeight + "px";
      }
    );
    const closeAt = () => {
      showAtList.value = false;
      showMemberList.value = allMemberList.value;
      position.value = {
        left: 0,
        top: 0
      };
    };
    const selectItem = (index) => {
      var _a;
      if (isPC && TUIGlobal.selectItem) {
        TUIGlobal.selectItem(index);
      } else {
        if ((_a = showMemberList == null ? void 0 : showMemberList.value) == null ? void 0 : _a.length) {
          const item = showMemberList == null ? void 0 : showMemberList.value[index];
          emits("insertAt", {
            id: item == null ? void 0 : item.userID,
            label: (item == null ? void 0 : item.nick) || (item == null ? void 0 : item.userID)
          });
        }
      }
      closeAt();
    };
    const handleMemberAvatar = (item) => {
      return (item == null ? void 0 : item.avatar) || "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png";
    };
    const handleMemberName = (item) => {
      return (item == null ? void 0 : item.nick) ? item == null ? void 0 : item.nick : item == null ? void 0 : item.userID;
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(BottomPopup, {
        show: unref(showAtList),
        onOnClose: closeAt
      }, {
        default: withCtx(() => [
          createElementVNode("div", {
            ref_key: "MessageInputAt",
            ref: MessageInputAt,
            class: normalizeClass([unref(isPC) ? "message-input-at" : "message-input-at-h5"])
          }, [
            createElementVNode("div", _hoisted_1, [
              !unref(isPC) ? (openBlock(), createElementBlock("header", _hoisted_2, [
                createElementVNode("span", _hoisted_3, toDisplayString(unref(TUITranslateService).t("TUIChat.选择提醒的人")), 1)
              ])) : createCommentVNode("", true),
              createElementVNode("ul", _hoisted_4, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(showMemberList), (item, index) => {
                  return openBlock(), createElementBlock("li", {
                    key: index,
                    ref_for: true,
                    ref_key: "memberListItems",
                    ref: memberListItems,
                    class: normalizeClass(["member-list-box-body", [index === unref(selectedIndex) && "selected"]]),
                    onClick: ($event) => selectItem(index)
                  }, [
                    createElementVNode("img", {
                      class: "member-list-box-body-avatar",
                      src: handleMemberAvatar(item)
                    }, null, 8, _hoisted_6),
                    createElementVNode("span", _hoisted_7, toDisplayString(handleMemberName(item)), 1)
                  ], 10, _hoisted_5);
                }), 128))
              ])
            ], 512)
          ], 2)
        ]),
        _: 1
      }, 8, ["show"]);
    };
  }
});
export {
  _sfc_main as default
};
