import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, unref } from "vue";
import StreamRegion from "../StreamRegion/StreamRegionPC.vue.mjs";
import { isPC } from "../../../utils/environment.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    streamInfoList: {},
    aspectRatio: {},
    horizontalCount: {},
    verticalCount: {},
    isNeedPlayStream: { type: Boolean, default: true },
    observerViewInVisible: { type: Boolean }
  },
  emits: ["room-dblclick"],
  setup(__props) {
    const props = __props;
    const streamListContainerRef = ref();
    const streamListRef = ref();
    const currentPageIndex = ref(0);
    const maxCountEveryPage = computed(
      () => props.horizontalCount * props.verticalCount
    );
    const isGridLayout = computed(
      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
    );
    watch(
      () => props.streamInfoList.length,
      (val, oldVal) => {
        if (oldVal === 0) {
          handleLayout();
        }
        if (isGridLayout.value && currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
          handleEqualPointsLayout();
        }
      }
    );
    const singleStreamMargin = isPC ? 8 : 4;
    const streamListStyle = ref({
      width: "0",
      height: "0"
    });
    const streamStyle = ref({
      width: "0",
      height: "0",
      "--stream-margin": `${singleStreamMargin / 2}px`
    });
    const widthRatio = computed(() => {
      var _a, _b;
      if (!props.aspectRatio || ((_a = props.aspectRatio) == null ? void 0 : _a.indexOf(":")) < 0) {
        return 0;
      }
      return Number((_b = props.aspectRatio) == null ? void 0 : _b.split(":")[0]);
    });
    const heightRatio = computed(() => {
      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
        return 0;
      }
      return Number(props.aspectRatio.split(":")[1]);
    });
    async function handleEqualPointsLayout() {
      var _a, _b;
      const number = currentPageIndex.value > 0 ? maxCountEveryPage.value : props.streamInfoList.slice(0, maxCountEveryPage.value).length;
      if (number <= 0 || !streamListContainerRef.value) {
        return;
      }
      const containerWidth = (_a = streamListContainerRef.value) == null ? void 0 : _a.offsetWidth;
      const containerHeight = (_b = streamListContainerRef.value) == null ? void 0 : _b.offsetHeight;
      const horizontalStreamNumber = props.horizontalCount;
      const verticalStreamNumber = props.verticalCount;
      const contentWidth = (containerWidth - horizontalStreamNumber * singleStreamMargin) / horizontalStreamNumber;
      const contentHeight = (containerHeight - verticalStreamNumber * singleStreamMargin) / verticalStreamNumber;
      let width = containerWidth;
      let height = containerWidth;
      if (widthRatio.value && heightRatio.value) {
        const scaleWidth = contentWidth / widthRatio.value;
        const scaleHeight = contentHeight / heightRatio.value;
        if (scaleWidth > scaleHeight) {
          width = contentHeight / heightRatio.value * widthRatio.value;
          height = contentHeight;
        }
        if (scaleWidth <= scaleHeight) {
          width = contentWidth;
          height = contentWidth / widthRatio.value * heightRatio.value;
        }
      }
      streamStyle.value.width = `${width}px`;
      streamStyle.value.height = `${height}px`;
      streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
      streamListStyle.value.height = `${verticalStreamNumber * (height + singleStreamMargin)}px`;
    }
    function handleHorizontalInfinityLayout() {
      streamListStyle.value = {};
      const containerHeight = streamListRef.value.offsetHeight;
      const contentHeight = containerHeight;
      const contentWidth = containerHeight * 16 / 9;
      streamStyle.value.width = `${contentWidth}px`;
      streamStyle.value.height = `${contentHeight}px`;
    }
    function handleVerticalInfinityLayout() {
      streamListStyle.value = {};
      const containerWidth = streamListRef.value.offsetWidth;
      const contentWidth = containerWidth;
      const contentHeight = containerWidth * 9 / 16;
      streamStyle.value.width = `${contentWidth}px`;
      streamStyle.value.height = `${contentHeight}px`;
    }
    const isHorizontalInfinityLayout = computed(
      () => props.horizontalCount === Infinity
    );
    const isVerticalInfinityLayout = computed(
      () => props.verticalCount === Infinity
    );
    const isEqualPointsLayout = computed(
      () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
    );
    function handleLayout() {
      if (isHorizontalInfinityLayout.value) {
        handleHorizontalInfinityLayout();
        return;
      }
      if (isVerticalInfinityLayout.value) {
        handleVerticalInfinityLayout();
        return;
      }
      if (isEqualPointsLayout.value) {
        handleEqualPointsLayout();
        return;
      }
    }
    onMounted(() => {
      handleLayout();
    });
    watch(
      () => [
        props.horizontalCount,
        props.verticalCount,
        props.streamInfoList.length
      ],
      () => {
        handleLayout();
      },
      { immediate: true }
    );
    const resizeObserver = new ResizeObserver(() => {
      handleLayout();
    });
    onMounted(() => {
      resizeObserver.observe(streamListContainerRef.value);
    });
    onBeforeUnmount(() => {
      resizeObserver.unobserve(streamListContainerRef.value);
    });
    function handleWheel(event) {
      streamListContainerRef.value.scrollLeft += event.deltaY;
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "streamListContainerRef",
        ref: streamListContainerRef,
        class: normalizeClass({
          "horizontal-infinity-layout": isHorizontalInfinityLayout.value,
          "vertical-infinity-layout": isVerticalInfinityLayout.value,
          "equal-points-layout": isEqualPointsLayout.value
        })
      }, [
        createElementVNode("div", {
          class: "stream-list",
          ref_key: "streamListRef",
          ref: streamListRef,
          style: normalizeStyle(streamListStyle.value),
          onWheel: handleWheel
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.streamInfoList, (streamInfo) => {
            return openBlock(), createBlock(unref(StreamRegion), {
              class: "stream-list-item",
              key: `${streamInfo.userId}_${streamInfo.streamType}`,
              onRoomDblclick: ($event) => _ctx.$emit("room-dblclick", streamInfo),
              streamInfo,
              style: normalizeStyle(streamStyle.value),
              isNeedPlayStream: _ctx.isNeedPlayStream,
              observerViewInVisible: _ctx.observerViewInVisible,
              isEnlarge: false
            }, null, 8, ["onRoomDblclick", "streamInfo", "style", "isNeedPlayStream", "observerViewInVisible"]);
          }), 128))
        ], 36)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
