"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const room = require("tuikit-atomicx-vue3/room");
const IconButton = require("../base/IconButton.vue2.js");
const vClickOutside = require("../base/vClickOutside.js");
const _hoisted_1 = {
  key: 0,
  class: "network-info-wrapper"
};
const _hoisted_2 = {
  key: 0,
  class: "network-panel"
};
const _hoisted_3 = { class: "panel-item" };
const _hoisted_4 = { class: "item-label" };
const _hoisted_5 = { class: "panel-item" };
const _hoisted_6 = { class: "item-label" };
const _hoisted_7 = { class: "packet-loss-container" };
const _hoisted_8 = { class: "packet-loss-item" };
const _hoisted_9 = { class: "item-value" };
const _hoisted_10 = { class: "packet-loss-item" };
const _hoisted_11 = { class: "item-value" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  setup(__props) {
    const { networkInfo } = room.useDeviceState();
    const { t } = uikitBaseComponentVue3.useUIKit();
    const isNetworkPanelVisible = vue.ref(false);
    const networkQualityMap = vue.computed(() => ({
      [room.NetworkQuality.Excellent]: {
        title: t("Network.Stability"),
        type: "success",
        icon: uikitBaseComponentVue3.IconNetworkStability
      },
      [room.NetworkQuality.Good]: {
        title: t("Network.Stability"),
        type: "success",
        icon: uikitBaseComponentVue3.IconNetworkStability
      },
      [room.NetworkQuality.Poor]: {
        title: t("Network.Fluctuation"),
        type: "warning",
        icon: uikitBaseComponentVue3.IconNetworkFluctuation
      },
      [room.NetworkQuality.Bad]: {
        title: t("Network.Lag"),
        type: "danger",
        icon: uikitBaseComponentVue3.IconNetworkLag
      },
      [room.NetworkQuality.VeryBad]: {
        title: t("Network.Lag"),
        type: "danger",
        icon: uikitBaseComponentVue3.IconNetworkLag
      },
      [room.NetworkQuality.Down]: {
        title: t("Network.Disconnected"),
        type: "disconnected",
        icon: uikitBaseComponentVue3.IconNetworkDisconnected
      }
    }));
    const currentNetworkState = vue.computed(() => {
      var _a;
      const quality = (_a = networkInfo.value) == null ? void 0 : _a.quality;
      if (!networkInfo.value || quality === room.NetworkQuality.Unknown) {
        return null;
      }
      return networkQualityMap.value[quality] || null;
    });
    function toggleNetworkPanel() {
      isNetworkPanelVisible.value = !isNetworkPanelVisible.value;
    }
    function closeNetworkPanel() {
      isNetworkPanelVisible.value = false;
    }
    return (_ctx, _cache) => {
      return currentNetworkState.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(IconButton.default, {
          layout: "horizontal",
          icon: currentNetworkState.value.icon,
          onClickIcon: toggleNetworkPanel
        }, {
          title: vue.withCtx(() => [
            vue.createElementVNode("span", {
              class: vue.normalizeClass(["network-title", `status-${currentNetworkState.value.type}`])
            }, vue.toDisplayString(currentNetworkState.value.title), 3)
          ]),
          _: 1
        }, 8, ["icon"]),
        vue.createVNode(vue.Transition, { name: "fade-slide" }, {
          default: vue.withCtx(() => {
            var _a, _b, _c;
            return [
              isNetworkPanelVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                vue.createElementVNode("div", _hoisted_3, [
                  vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(vue.unref(t)("Network.Latency")), 1),
                  vue.createElementVNode("span", {
                    class: vue.normalizeClass(["item-value", "latency-value", `latency-value-${currentNetworkState.value.type}`])
                  }, vue.toDisplayString((_a = vue.unref(networkInfo)) == null ? void 0 : _a.delay) + " ms ", 3)
                ]),
                vue.createElementVNode("div", _hoisted_5, [
                  vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(vue.unref(t)("Network.PacketLoss")), 1),
                  vue.createElementVNode("div", _hoisted_7, [
                    vue.createElementVNode("div", _hoisted_8, [
                      vue.createElementVNode("span", _hoisted_9, vue.toDisplayString((_b = vue.unref(networkInfo)) == null ? void 0 : _b.upLoss) + "%", 1),
                      vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowStrokeUp), { class: "arrow-icon arrow-up" })
                    ]),
                    vue.createElementVNode("div", _hoisted_10, [
                      vue.createElementVNode("span", _hoisted_11, vue.toDisplayString((_c = vue.unref(networkInfo)) == null ? void 0 : _c.downLoss) + "%", 1),
                      vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowStrokeUp), { class: "arrow-icon arrow-down" })
                    ])
                  ])
                ])
              ])) : vue.createCommentVNode("", true)
            ];
          }),
          _: 1
        })
      ])), [
        [vue.unref(vClickOutside.default), closeNetworkPanel]
      ]) : vue.createCommentVNode("", true);
    };
  }
});
exports.default = _sfc_main;
