"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const room = require("../../../stores/room.js");
const basic = require("../../../stores/basic.js");
const render = require("../../../constants/render.js");
const StreamRegionPC = require("../StreamRegion/StreamRegionPC.vue.js");
const index = require("../StreamList/index.vue.js");
const index$1 = require("../../../utils/common/logger/index.js");
const ArrowStrokeTurnPageIcon = require("../../common/icons/ArrowStrokeTurnPageIcon.vue.js");
const ArrowStroke = require("../../common/ArrowStroke.vue.js");
const SvgIcon = require("../../common/base/SvgIcon.vue.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const _hoisted_1 = {
  key: 1,
  class: "turn-page-container"
};
const logPrefix = "[StreamContainer]";
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "StreamContainerPC",
  props: {
    showRoomTool: { type: Boolean }
  },
  setup(__props) {
    const roomEngine = useRoomEngine.default();
    const roomStore = room.useRoomStore();
    const { streamList, streamNumber, remoteStreamList } = pinia.storeToRefs(roomStore);
    const basicStore = basic.useBasicStore();
    const { layout } = pinia.storeToRefs(basicStore);
    const showSideList = Vue.ref(true);
    const enlargeStream = Vue.ref(null);
    const horizontalCount = Vue.ref(1);
    const verticalCount = Vue.ref(1);
    const currentPageIndex = Vue.ref(0);
    const maxCountEveryPage = Vue.computed(
      () => horizontalCount.value * verticalCount.value
    );
    const totalPage = Vue.computed(
      () => Math.ceil(streamList.value.length / maxCountEveryPage.value)
    );
    const showTurnPageControl = Vue.computed(
      () => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && totalPage.value > 1
    );
    const showTurnPageLeftArrow = Vue.computed(
      () => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > 0
    );
    const showTurnPageRightArrow = Vue.computed(
      () => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value < totalPage.value - 1
    );
    function handleTurnPageLeft() {
      currentPageIndex.value = currentPageIndex.value - 1;
    }
    function handleTurnPageRight() {
      currentPageIndex.value = currentPageIndex.value + 1;
    }
    const showStreamList = Vue.computed(() => {
      var _a;
      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS) {
        return streamList.value.slice(
          currentPageIndex.value * maxCountEveryPage.value,
          (currentPageIndex.value + 1) * maxCountEveryPage.value
        );
      }
      if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
        return streamList.value.filter((item) => item !== enlargeStream.value);
      }
      return streamList.value;
    });
    Vue.watch(
      () => streamList.value.length,
      (val) => {
        if (val === 1) {
          basicStore.setLayout(render.LAYOUT.NINE_EQUAL_POINTS);
          enlargeStream.value = null;
          return;
        }
      }
    );
    const streamContainerClass = Vue.ref("stream-container-flatten");
    const enlargedContainerRef = Vue.ref();
    const arrowDirection = Vue.computed(() => {
      let arrowDirection2 = "right";
      if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
        arrowDirection2 = showSideList.value ? "up" : "down";
      }
      if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
        arrowDirection2 = showSideList.value ? "right" : "left";
      }
      return arrowDirection2;
    });
    const strokePosition = Vue.computed(() => {
      let strokePosition2 = "";
      if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
        strokePosition2 = "bottom";
      }
      if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
        strokePosition2 = "left";
      }
      return strokePosition2;
    });
    function handleClickIcon() {
      showSideList.value = !showSideList.value;
    }
    function getEnlargeStream() {
      var _a;
      if ((_a = roomStore.localScreenStream) == null ? void 0 : _a.hasVideoStream) {
        return roomStore.localScreenStream;
      }
      if (remoteStreamList.value.length > 0) {
        const remoteScreenStream = remoteStreamList.value.find(
          (stream) => stream.streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream && stream.hasVideoStream
        );
        return remoteScreenStream ? remoteScreenStream : remoteStreamList.value[0];
      }
      return roomStore.localStream;
    }
    async function handleNineEqualPointsLayout() {
      streamContainerClass.value = "stream-container-flatten";
      enlargeStream.value = null;
      horizontalCount.value = Math.min(
        Math.ceil(Math.sqrt(streamList.value.length)),
        3
      );
      verticalCount.value = Math.min(
        Math.ceil(streamList.value.length / horizontalCount.value),
        3
      );
      currentPageIndex.value = 0;
    }
    async function handleRightSideListLayout() {
      streamContainerClass.value = "stream-container-right";
      horizontalCount.value = 1;
      verticalCount.value = Infinity;
      if (!enlargeStream.value) {
        enlargeStream.value = getEnlargeStream();
      }
    }
    async function handleTopSideListLayout() {
      streamContainerClass.value = "stream-container-top";
      horizontalCount.value = Infinity;
      verticalCount.value = 1;
      if (!enlargeStream.value) {
        enlargeStream.value = getEnlargeStream();
      }
    }
    function handleEnlargeStreamRegion(stream) {
      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS && streamList.value.length > 1) {
        basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
      }
      enlargeStream.value = stream;
    }
    async function handleLayout() {
      switch (layout.value) {
        case render.LAYOUT.NINE_EQUAL_POINTS:
          handleNineEqualPointsLayout();
          break;
        case render.LAYOUT.RIGHT_SIDE_LIST:
          handleRightSideListLayout();
          break;
        case render.LAYOUT.TOP_SIDE_LIST:
          handleTopSideListLayout();
          break;
      }
    }
    Vue.watch(streamNumber, (val) => {
      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS) {
        horizontalCount.value = Math.min(Math.ceil(Math.sqrt(val)), 3);
        verticalCount.value = Math.min(Math.ceil(val / horizontalCount.value), 3);
        if (currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
        }
      }
    });
    Vue.watch(
      layout,
      () => {
        handleLayout();
      },
      { immediate: true }
    );
    const showIconControl = Vue.computed(
      () => [render.LAYOUT.RIGHT_SIDE_LIST, render.LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
    );
    const onUserVideoStateChanged = (eventInfo) => {
      var _a, _b;
      const { userId, streamType, hasVideo } = eventInfo;
      if (streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
        if (hasVideo) {
          enlargeStream.value = userId === basicStore.userId ? roomStore.localScreenStream : roomStore.streamInfoObj[`${userId}_${streamType}`];
          if (enlargeStream.value && [render.LAYOUT.RIGHT_SIDE_LIST, render.LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) === -1) {
            basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
          }
          if (userId !== basicStore.userId) {
            roomStore.setHasOtherScreenShare(true);
          }
        } else {
          if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
            handleLargeStreamLeave();
          }
          if (userId !== basicStore.userId) {
            roomStore.setHasOtherScreenShare(false);
          }
          index$1.default.debug(
            `${logPrefix} onUserVideoStateChanged: stop`,
            userId,
            streamType
          );
          (_b = roomEngine.instance) == null ? void 0 : _b.stopPlayRemoteVideo({
            userId,
            streamType
          });
        }
      }
    };
    const onSeatListChanged = (eventInfo) => {
      var _a;
      const { leftList } = eventInfo;
      const leftUserIdList = leftList.map((item) => item.userId);
      if (enlargeStream.value && leftUserIdList.includes((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
        handleLargeStreamLeave();
      }
    };
    const onRemoteUserLeaveRoom = (eventInfo) => {
      var _a;
      const {
        userInfo: { userId }
      } = eventInfo;
      if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
        handleLargeStreamLeave();
      }
    };
    const handleLargeStreamLeave = () => {
      if (roomStore.remoteStreamList.length === 0) {
        basicStore.setLayout(render.LAYOUT.NINE_EQUAL_POINTS);
        enlargeStream.value = null;
      } else {
        [enlargeStream.value] = roomStore.remoteStreamList;
      }
    };
    TUIRoomEngine.once("ready", () => {
      var _a, _b, _c;
      (_a = roomEngine.instance) == null ? void 0 : _a.on(
        TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom,
        onRemoteUserLeaveRoom
      );
      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
      (_c = roomEngine.instance) == null ? void 0 : _c.on(
        TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged,
        onUserVideoStateChanged
      );
    });
    Vue.onUnmounted(() => {
      var _a, _b, _c;
      (_a = roomEngine.instance) == null ? void 0 : _a.off(
        TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom,
        onRemoteUserLeaveRoom
      );
      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
      (_c = roomEngine.instance) == null ? void 0 : _c.off(
        TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged,
        onUserVideoStateChanged
      );
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        id: "streamContainer",
        class: Vue.normalizeClass(streamContainerClass.value)
      }, [
        Vue.withDirectives(Vue.createElementVNode("div", {
          ref_key: "enlargedContainerRef",
          ref: enlargedContainerRef,
          class: "enlarged-stream-container"
        }, [
          enlargeStream.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(StreamRegionPC.default), {
            key: 0,
            streamInfo: enlargeStream.value,
            aspectRatio: "16:9",
            isEnlarge: true,
            observerViewInVisible: true
          }, null, 8, ["streamInfo"])) : Vue.createCommentVNode("", true)
        ], 512), [
          [Vue.vShow, enlargeStream.value]
        ]),
        Vue.createVNode(index.default, {
          class: Vue.normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`]),
          streamInfoList: showStreamList.value,
          horizontalCount: horizontalCount.value,
          verticalCount: verticalCount.value,
          aspectRatio: "16:9",
          observerViewInVisible: true,
          onRoomDblclick: handleEnlargeStreamRegion
        }, null, 8, ["class", "streamInfoList", "horizontalCount", "verticalCount"]),
        showIconControl.value && (_ctx.showRoomTool || showSideList.value) ? (Vue.openBlock(), Vue.createBlock(ArrowStroke.default, {
          key: 0,
          class: Vue.normalizeClass([`arrow-stroke-${arrowDirection.value}`]),
          "stroke-position": strokePosition.value,
          "arrow-direction": arrowDirection.value,
          "has-stroke": showSideList.value,
          onClickArrow: handleClickIcon
        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : Vue.createCommentVNode("", true),
        showTurnPageControl.value && _ctx.showRoomTool ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
          Vue.withDirectives(Vue.createElementVNode("div", {
            class: "turn-page-arrow-container left-container",
            onClick: handleTurnPageLeft
          }, [
            Vue.createVNode(SvgIcon.default, { icon: ArrowStrokeTurnPageIcon.default })
          ], 512), [
            [Vue.vShow, showTurnPageLeftArrow.value]
          ]),
          Vue.withDirectives(Vue.createElementVNode("div", {
            class: "turn-page-arrow-container right-container",
            onClick: handleTurnPageRight
          }, [
            Vue.createVNode(SvgIcon.default, {
              class: "turn-page-right",
              icon: ArrowStrokeTurnPageIcon.default
            })
          ], 512), [
            [Vue.vShow, showTurnPageRightArrow.value]
          ])
        ])) : Vue.createCommentVNode("", true)
      ], 2);
    };
  }
});
exports.default = _sfc_main;
