import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, createVNode } from "vue";
import { storeToRefs } from "pinia";
import MessageText from "../MessageTypes/MessageText.vue.mjs";
import { isMobile } from "../../../utils/environment.mjs";
import useMessageList from "./useMessageListHook.mjs";
import { getScrollInfo } from "../../../utils/domOperation.mjs";
import { throttle } from "../../../utils/utils.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
const _hoisted_1 = ["title"];
const _hoisted_2 = { class: "message-body" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MessageListPC",
  setup(__props) {
    const messageListRef = ref();
    const roomStore = useRoomStore();
    const { getDisplayName } = storeToRefs(roomStore);
    const {
      messageList,
      setMessageListInfo,
      handleGetHistoryMessageList,
      isCompleted,
      getDisplaySenderName
    } = useMessageList();
    let isScrollAtBottom = true;
    const handleMessageListScroll = (e) => {
      const messageContainer = e.target;
      const bottom = messageContainer.scrollHeight - messageContainer.scrollTop - messageContainer.clientHeight;
      isScrollAtBottom = bottom <= 80;
      if (messageContainer.scrollTop < 40 && !isCompleted.value) {
        handleGetHistoryMessageList();
      }
    };
    const handleScroll = throttle(handleMessageListScroll, 1e3);
    async function scrollToLatestMessage() {
      const { scrollHeight } = await getScrollInfo("#messageScrollList");
      if (messageListRef.value) {
        messageListRef.value.scrollTop = scrollHeight;
      }
    }
    watch(messageList, async (newMessageList, oldMessageList) => {
      var _a;
      if (newMessageList.length === 0) return;
      const lastMessage = newMessageList.slice(-1);
      const oldLastMessage = oldMessageList.slice(-1);
      const isSendByMe = lastMessage[0].flow === "out";
      const isNewMessage = lastMessage[0].ID !== ((_a = oldLastMessage[0]) == null ? void 0 : _a.ID);
      await nextTick();
      if (isScrollAtBottom) {
        scrollToLatestMessage();
        return;
      }
      if (isSendByMe && isNewMessage) {
        scrollToLatestMessage();
      }
    });
    onMounted(() => {
      var _a;
      setMessageListInfo();
      (_a = messageListRef.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
    });
    onUnmounted(() => {
      var _a;
      (_a = messageListRef.value) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(unref(isMobile) ? "message-list-container-h5" : "message-list-container")
      }, [
        createElementVNode("div", {
          id: "messageScrollList",
          ref_key: "messageListRef",
          ref: messageListRef,
          class: "message-list"
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messageList), (item, index) => {
            return openBlock(), createElementBlock("div", {
              key: item.ID,
              ref_for: true,
              ref: "messageAimId",
              class: normalizeClass(["message-item", `${"out" === item.flow ? "is-me" : ""}`])
            }, [
              unref(getDisplaySenderName)(index) ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: "message-header",
                title: item.nick || item.from
              }, toDisplayString(unref(getDisplayName)(item.from)), 9, _hoisted_1)) : createCommentVNode("", true),
              createElementVNode("div", _hoisted_2, [
                createVNode(MessageText, {
                  data: item.payload.text
                }, null, 8, ["data"])
              ])
            ], 2);
          }), 128))
        ], 512)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
