import { defineComponent, ref, watch, onUnmounted, createElementBlock, openBlock, Fragment, createVNode, unref, withCtx, createElementVNode, createBlock, createCommentVNode, toDisplayString } from "vue";
import { useUIKit, Badge, IconChat, TUIPopup } from "@tencentcloud/uikit-base-component-vue3";
import { useConversationListState, useMessageListState } from "tuikit-atomicx-vue3/chat";
import { useRoomState } from "tuikit-atomicx-vue3/room";
import IconButtonH5 from "../base/IconButtonH5.vue2.mjs";
import PopUpArrowDown from "../base/PopUpArrowDown.vue2.mjs";
import RoomChatH5 from "./RoomChat.vue2.mjs";
const _hoisted_1 = { class: "chat-content" };
const _hoisted_2 = { class: "chat-title" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ChatButton",
  setup(__props) {
    const { t } = useUIKit();
    const isPopupVisible = ref(false);
    const { setActiveConversation } = useConversationListState();
    const { currentRoom } = useRoomState();
    const { messageList } = useMessageListState();
    const unreadCount = ref(0);
    watch(
      () => {
        var _a;
        return (_a = messageList.value) == null ? void 0 : _a.length;
      },
      (newLength, oldLength) => {
        if (!newLength || newLength === 0) {
          return;
        }
        if (!isPopupVisible.value && newLength > oldLength) {
          unreadCount.value += newLength - oldLength;
        }
      }
    );
    watch(
      () => isPopupVisible.value,
      (isOpen) => {
        if (isOpen) {
          unreadCount.value = 0;
        }
      }
    );
    watch(
      () => {
        var _a;
        return (_a = currentRoom.value) == null ? void 0 : _a.roomId;
      },
      (roomId) => {
        if (!roomId) {
          return;
        }
        setActiveConversation(`GROUP${roomId}`);
        unreadCount.value = 0;
      }
    );
    onUnmounted(() => {
      setActiveConversation("");
    });
    const handleClick = () => {
      unreadCount.value = 0;
      isPopupVisible.value = true;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createVNode(IconButtonH5, {
          title: unref(t)("Chat.Title"),
          onClick: handleClick
        }, {
          default: withCtx(() => [
            createVNode(unref(Badge), {
              value: unreadCount.value,
              hidden: !unreadCount.value
            }, {
              default: withCtx(() => [
                createVNode(unref(IconChat), { size: 24 })
              ]),
              _: 1
            }, 8, ["value", "hidden"])
          ]),
          _: 1
        }, 8, ["title"]),
        createVNode(unref(TUIPopup), {
          visible: isPopupVisible.value,
          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isPopupVisible.value = $event),
          height: "90%"
        }, {
          default: withCtx(() => [
            createElementVNode("div", _hoisted_1, [
              createVNode(PopUpArrowDown, {
                onClick: _cache[0] || (_cache[0] = ($event) => isPopupVisible.value = false)
              }),
              createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("Chat.Title")), 1),
              isPopupVisible.value ? (openBlock(), createBlock(RoomChatH5, { key: 0 })) : createCommentVNode("", true)
            ])
          ]),
          _: 1
        }, 8, ["visible"])
      ], 64);
    };
  }
});
export {
  _sfc_main as default
};
