import { defineComponent, ref, watchEffect, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, Fragment, renderList, createCommentVNode } from "vue";
import { RoomState, chatExtension } from "../chatExtension.mjs";
import { HandleRoomMessage } from "./handleRoomMessage.mjs";
import { useI18n } from "../../locales/index.mjs";
const _hoisted_1 = { class: "content" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { class: "content-desc" };
const _hoisted_5 = { class: "title" };
const _hoisted_6 = { class: "users" };
const _hoisted_7 = ["src", "alt"];
const _hoisted_8 = {
  key: 0,
  class: "room-info"
};
const _hoisted_9 = {
  key: 2,
  class: /* @__PURE__ */ normalizeClass(["room-info", "center"])
};
const defaultAvatarUrl = "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "RoomMessageCard",
  props: {
    message: {}
  },
  setup(__props) {
    const { t } = useI18n();
    const props = __props;
    const roomCardData = ref({
      roomId: "",
      isRoomMessage: false,
      isRoomCreateByMe: false,
      isMessageFromMe: false,
      roomState: RoomState.CREATING,
      userList: [],
      isInnerRoom: false,
      myProfile: {},
      ownerName: "",
      owner: ""
    });
    const roomMessageCard = new HandleRoomMessage();
    watchEffect(() => {
      roomMessageCard.initialize(props.message);
      const {
        isRoomMessage,
        isRoomCreateByMe,
        roomState,
        userList,
        roomId,
        isInnerRoom,
        myProfile,
        isMessageFromMe,
        ownerName,
        owner
      } = roomMessageCard.messageData;
      roomCardData.value = {
        roomId,
        isRoomMessage,
        isRoomCreateByMe,
        isMessageFromMe,
        roomState,
        userList,
        isInnerRoom,
        myProfile,
        ownerName,
        owner
      };
    });
    const avatarLoadError = (e) => {
      e.target.src = defaultAvatarUrl;
    };
    const contentTitleClass = computed(() => {
      const stateMap = {
        [RoomState.CREATED]: "success",
        [RoomState.CREATING]: "primary",
        [RoomState.DESTROYING]: "default",
        [RoomState.DESTROYED]: "default"
      };
      return stateMap[roomCardData.value.roomState];
    });
    const footerClass = computed(() => {
      const stateMap = {
        [RoomState.CREATED]: "default",
        [RoomState.CREATING]: "center",
        [RoomState.DESTROYING]: "center",
        [RoomState.DESTROYED]: "center"
      };
      return stateMap[roomCardData.value.roomState];
    });
    const roomInfo = computed(() => {
      if (roomCardData.value.roomState === RoomState.CREATING) {
        return {
          visible: true,
          message: `${t("Initiating")}...`
        };
      }
      if (roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
        return {
          visible: true,
          message: roomCardData.value.userList.length > 1 ? t("X people have joined", {
            number: roomCardData.value.userList.length - 1
          }) : t("Waiting for members to join the meeting")
        };
      }
      if (!roomCardData.value.isRoomCreateByMe && roomCardData.value.roomState === RoomState.CREATED) {
        return {
          visible: true,
          message: t("X people are in the meeting", {
            number: roomCardData.value.userList.length
          })
        };
      }
      return {
        visible: false,
        message: ""
      };
    });
    const roomStatus = computed(() => {
      if (roomCardData.value.roomState === RoomState.CREATED) {
        return {
          visible: true,
          message: roomCardData.value.isInnerRoom ? t("Already joined") : t("Enter the meeting")
        };
      }
      return {
        visible: false,
        message: ""
      };
    });
    const roomDestroy = computed(() => {
      if (roomCardData.value.roomState === RoomState.DESTROYING) {
        return {
          visible: true,
          message: `${t("Ending meeting")}...`
        };
      }
      if (roomCardData.value.roomState === RoomState.DESTROYED) {
        return {
          visible: true,
          message: t("The meeting has ended")
        };
      }
      return {
        visible: false,
        message: ""
      };
    });
    const enterRoom = () => {
      chatExtension.enterRoom(roomCardData.value.roomId, props.message);
    };
    return (_ctx, _cache) => {
      return roomCardData.value.isRoomMessage ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: normalizeClass([
          "room-message-container",
          roomCardData.value.isMessageFromMe ? "isMe" : "notMe"
        ])
      }, [
        createElementVNode("div", {
          class: normalizeClass(["room-message-card-container", roomCardData.value.roomState])
        }, [
          createElementVNode("div", _hoisted_1, [
            createElementVNode("div", {
              class: normalizeClass(["content-title", contentTitleClass.value])
            }, [
              _cache[0] || (_cache[0] = createElementVNode("span", { class: "icon" }, null, -1)),
              unref(RoomState).CREATED === roomCardData.value.roomState ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(unref(t)("Meeting in progress")), 1)) : (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(unref(t)("Meeting")), 1))
            ], 2),
            createElementVNode("div", _hoisted_4, [
              createElementVNode("div", _hoisted_5, toDisplayString(`${roomCardData.value.ownerName || roomCardData.value.owner}${unref(t)("Quick Conference")}`), 1),
              createElementVNode("ul", _hoisted_6, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(roomCardData.value.userList, (user, index) => {
                  return openBlock(), createElementBlock(Fragment, null, [
                    index <= 4 ? (openBlock(), createElementBlock("li", {
                      key: user.userId
                    }, [
                      createElementVNode("img", {
                        src: user.faceUrl || defaultAvatarUrl,
                        alt: user.nickName || user.userId,
                        onerror: avatarLoadError
                      }, null, 8, _hoisted_7)
                    ])) : createCommentVNode("", true),
                    index === 5 ? (openBlock(), createElementBlock("li", {
                      class: "more",
                      key: user.userId
                    }, "...")) : createCommentVNode("", true)
                  ], 64);
                }), 256))
              ])
            ])
          ]),
          createElementVNode("div", {
            class: normalizeClass(["footer", footerClass.value, roomCardData.value.isInnerRoom && "in-room"])
          }, [
            roomInfo.value.visible ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(roomInfo.value.message), 1)) : createCommentVNode("", true),
            roomStatus.value.visible ? (openBlock(), createElementBlock("span", {
              key: 1,
              class: normalizeClass(["room-status"]),
              onClick: enterRoom
            }, toDisplayString(roomStatus.value.message), 1)) : createCommentVNode("", true),
            roomDestroy.value.visible ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(roomDestroy.value.message), 1)) : createCommentVNode("", true)
          ], 2)
        ], 2)
      ], 2)) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
