"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const basic = require("../../../stores/basic.js");
const pinia = require("pinia");
const index = require("../../../locales/index.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const IconButton = require("../../common/base/IconButton.vue.js");
const vClickOutside = require("../../../directives/vClickOutside.js");
const NetworkStabilityIcon = require("../../common/icons/NetworkStabilityIcon.vue.js");
const NetworkFluctuationIcon = require("../../common/icons/NetworkFluctuationIcon.vue.js");
const NetworkLagIcon = require("../../common/icons/NetworkLagIcon.vue.js");
const NetworkDisconnectedIcon = require("../../common/icons/NetworkDisconnectedIcon.vue.js");
const ArrowStrokeUpIcon = require("../../common/icons/ArrowStrokeUpIcon.vue.js");
const room = require("../../../constants/room.js");
const _hoisted_1 = { class: "network-info-container" };
const _hoisted_2 = { class: "network-detail-item" };
const _hoisted_3 = { class: "network-detail-item" };
const _hoisted_4 = { class: "network-detail-packet" };
const _hoisted_5 = { class: "network-detail-packet-item" };
const _hoisted_6 = { class: "network-detail-packet-item" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "NetworkInfo",
  setup(__props) {
    const roomEngine = useRoomEngine.default();
    const { t } = index.useI18n();
    const basicStore = basic.useBasicStore();
    const { networkInfo } = pinia.storeToRefs(basicStore);
    const networkBoard = Vue.ref();
    const showNetworkInfo = Vue.ref(false);
    const state = Vue.reactive({
      title: "",
      titleType: void 0,
      networkIcon: null
    });
    const qualityMap = {
      [TUIRoomEngine.TUINetworkQuality.kQualityExcellent]: {
        title: "Stability",
        titleType: "success",
        icon: Vue.shallowRef(NetworkStabilityIcon.default)
      },
      [TUIRoomEngine.TUINetworkQuality.kQualityPoor]: {
        title: "Fluctuation",
        titleType: "warning",
        icon: Vue.shallowRef(NetworkFluctuationIcon.default)
      },
      [TUIRoomEngine.TUINetworkQuality.kQualityVeryBad]: {
        title: "Lag",
        titleType: "danger",
        icon: Vue.shallowRef(NetworkLagIcon.default)
      },
      [TUIRoomEngine.TUINetworkQuality.kQualityDown]: {
        title: "Disconnected",
        titleType: "info",
        icon: Vue.shallowRef(NetworkDisconnectedIcon.default)
      }
    };
    Vue.watchEffect(() => {
      const quality = qualityMap[networkInfo.value.quality];
      if (quality) {
        state.title = quality.title;
        state.titleType = quality.titleType;
        state.networkIcon = quality.icon;
      }
    });
    function handleClickNetworkIcon() {
      showNetworkInfo.value = !showNetworkInfo.value;
    }
    function handleClickOutSide() {
      if (showNetworkInfo.value) {
        showNetworkInfo.value = false;
      }
    }
    async function onUserNetworkQualityChanged({
      userNetworkList
    }) {
      userNetworkList.forEach((userNetwork) => {
        basicStore.setNetworkInfo(userNetwork);
      });
    }
    TUIRoomEngine.once("ready", () => {
      var _a;
      (_a = roomEngine.instance) == null ? void 0 : _a.on(
        TUIRoomEngine.TUIRoomEvents.onUserNetworkQualityChanged,
        onUserNetworkQualityChanged
      );
    });
    Vue.onUnmounted(() => {
      var _a;
      (_a = roomEngine.instance) == null ? void 0 : _a.off(
        TUIRoomEngine.TUIRoomEvents.onUserNetworkQualityChanged,
        onUserNetworkQualityChanged
      );
    });
    return (_ctx, _cache) => {
      return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
        Vue.createVNode(IconButton.default, {
          layout: Vue.unref(room.IconButtonLayout).HORIZONTAL,
          icon: state.networkIcon,
          onClickIcon: handleClickNetworkIcon
        }, {
          title: Vue.withCtx(() => [
            Vue.createElementVNode("span", {
              class: Vue.normalizeClass([`title-type-${state.titleType}`])
            }, Vue.toDisplayString(Vue.unref(t)(`${state.title}`)), 3)
          ]),
          _: 1
        }, 8, ["layout", "icon"]),
        showNetworkInfo.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          ref_key: "networkBoard",
          ref: networkBoard,
          class: "network-info-board"
        }, [
          Vue.createElementVNode("div", _hoisted_2, [
            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Latency")), 1),
            Vue.createElementVNode("span", {
              class: Vue.normalizeClass(["title-latency", `title-type-${state.titleType}`])
            }, Vue.toDisplayString(`${Vue.unref(networkInfo).delay} ms`), 3)
          ]),
          Vue.createElementVNode("div", _hoisted_3, [
            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Packet loss")), 1),
            Vue.createElementVNode("div", _hoisted_4, [
              Vue.createElementVNode("div", _hoisted_5, [
                Vue.createVNode(ArrowStrokeUpIcon.default),
                Vue.createElementVNode("span", null, Vue.toDisplayString(`${Vue.unref(networkInfo).upLoss}%`), 1)
              ]),
              Vue.createElementVNode("div", _hoisted_6, [
                Vue.createVNode(ArrowStrokeUpIcon.default, { class: "arrow-down" }),
                Vue.createElementVNode("span", null, Vue.toDisplayString(`${Vue.unref(networkInfo).downLoss}%`), 1)
              ])
            ])
          ])
        ], 512)) : Vue.createCommentVNode("", true)
      ])), [
        [Vue.unref(vClickOutside.default), handleClickOutSide]
      ]);
    };
  }
});
exports.default = _sfc_main;
