import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, nextTick } from "vue";
import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
import { useRoomStore } from "../../../../stores/room.mjs";
import { roomService } from "../../../../services/roomService.mjs";
import { useBasicStore } from "../../../../stores/basic.mjs";
import { storeToRefs } from "pinia";
import { getNanoId } from "../../../../utils/utils.mjs";
const _hoisted_1 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    streamInfo: {},
    isEnlarge: { type: Boolean },
    isNeedPlayStream: { type: Boolean, default: true },
    observerViewInVisible: { type: Boolean }
  },
  setup(__props) {
    const mediaManager = roomService.getMediaManager();
    const basicStore = useBasicStore();
    const roomStore = useRoomStore();
    const { defaultStreamType, streamInfoObj } = storeToRefs(roomStore);
    const props = __props;
    const playRegionDomRef = ref();
    const nanoId = getNanoId(5);
    const playRegionDomId = computed(
      () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
    );
    const streamTypeToFetch = computed(() => {
      const { streamType, userId } = props.streamInfo;
      const { userId: localUserId } = basicStore;
      if (streamType === TUIVideoStreamType.kScreenStream) {
        return TUIVideoStreamType.kScreenStream;
      }
      if (props.isEnlarge || userId === localUserId) {
        return TUIVideoStreamType.kCameraStream;
      }
      return defaultStreamType.value;
    });
    async function startPlayVideo() {
      if (!streamInfoObj.value[`${props.streamInfo.userId}_${props.streamInfo.streamType}`] || !playRegionDomRef.value) {
        return;
      }
      await nextTick();
      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
        await mediaManager.startPlayVideo({
          userId: props.streamInfo.userId,
          streamType: streamTypeToFetch.value,
          view: playRegionDomRef.value,
          observerViewInVisible: props.observerViewInVisible
        });
      }
    }
    async function stopPlayVideo() {
      await mediaManager.stopPlayVideo({
        userId: props.streamInfo.userId,
        streamType: streamTypeToFetch.value,
        view: playRegionDomRef.value
      });
    }
    watch(
      () => [
        props.streamInfo.userId,
        props.streamInfo.streamType,
        props.streamInfo.hasVideoStream,
        props.isNeedPlayStream
      ],
      async (val, oldVal) => {
        const [oldUserId, oldStreamType] = oldVal;
        if (oldUserId !== props.streamInfo.userId || oldStreamType !== props.streamInfo.streamType) {
          mediaManager.stopPlayVideo({
            userId: oldUserId,
            streamType: oldStreamType,
            view: playRegionDomRef.value
          });
        }
        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
          await startPlayVideo();
        } else {
          await stopPlayVideo();
        }
      }
    );
    watch(
      () => streamTypeToFetch,
      async () => {
        if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
          await startPlayVideo();
        }
      }
    );
    onMounted(async () => {
      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
        await startPlayVideo();
      }
    });
    onBeforeUnmount(async () => {
      if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
        await stopPlayVideo();
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "playRegionDomRef",
        ref: playRegionDomRef,
        id: playRegionDomId.value,
        class: "stream-play-container"
      }, null, 8, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};
