import { defineComponent, ref, computed, withDirectives, createCommentVNode, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, normalizeClass, toDisplayString, Transition, unref } from "vue";
import { useUIKit, IconNetworkDisconnected, IconNetworkLag, IconNetworkFluctuation, IconNetworkStability, IconArrowStrokeUp } from "@tencentcloud/uikit-base-component-vue3";
import { useDeviceState, NetworkQuality } from "tuikit-atomicx-vue3/room";
import IconButton from "../base/IconButton.vue2.mjs";
import vClickOutside from "../base/vClickOutside.mjs";
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__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { networkInfo } = useDeviceState();
    const { t } = useUIKit();
    const isNetworkPanelVisible = ref(false);
    const networkQualityMap = computed(() => ({
      [NetworkQuality.Excellent]: {
        title: t("Network.Stability"),
        type: "success",
        icon: IconNetworkStability
      },
      [NetworkQuality.Good]: {
        title: t("Network.Stability"),
        type: "success",
        icon: IconNetworkStability
      },
      [NetworkQuality.Poor]: {
        title: t("Network.Fluctuation"),
        type: "warning",
        icon: IconNetworkFluctuation
      },
      [NetworkQuality.Bad]: {
        title: t("Network.Lag"),
        type: "danger",
        icon: IconNetworkLag
      },
      [NetworkQuality.VeryBad]: {
        title: t("Network.Lag"),
        type: "danger",
        icon: IconNetworkLag
      },
      [NetworkQuality.Down]: {
        title: t("Network.Disconnected"),
        type: "disconnected",
        icon: IconNetworkDisconnected
      }
    }));
    const currentNetworkState = computed(() => {
      var _a;
      const quality = (_a = networkInfo.value) == null ? void 0 : _a.quality;
      if (!networkInfo.value || quality === 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 ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(IconButton, {
          layout: "horizontal",
          icon: currentNetworkState.value.icon,
          onClickIcon: toggleNetworkPanel
        }, {
          title: withCtx(() => [
            createElementVNode("span", {
              class: normalizeClass(["network-title", `status-${currentNetworkState.value.type}`])
            }, toDisplayString(currentNetworkState.value.title), 3)
          ]),
          _: 1
        }, 8, ["icon"]),
        createVNode(Transition, { name: "fade-slide" }, {
          default: withCtx(() => {
            var _a, _b, _c;
            return [
              isNetworkPanelVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
                createElementVNode("div", _hoisted_3, [
                  createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("Network.Latency")), 1),
                  createElementVNode("span", {
                    class: normalizeClass(["item-value", "latency-value", `latency-value-${currentNetworkState.value.type}`])
                  }, toDisplayString((_a = unref(networkInfo)) == null ? void 0 : _a.delay) + " ms ", 3)
                ]),
                createElementVNode("div", _hoisted_5, [
                  createElementVNode("span", _hoisted_6, toDisplayString(unref(t)("Network.PacketLoss")), 1),
                  createElementVNode("div", _hoisted_7, [
                    createElementVNode("div", _hoisted_8, [
                      createElementVNode("span", _hoisted_9, toDisplayString((_b = unref(networkInfo)) == null ? void 0 : _b.upLoss) + "%", 1),
                      createVNode(unref(IconArrowStrokeUp), { class: "arrow-icon arrow-up" })
                    ]),
                    createElementVNode("div", _hoisted_10, [
                      createElementVNode("span", _hoisted_11, toDisplayString((_c = unref(networkInfo)) == null ? void 0 : _c.downLoss) + "%", 1),
                      createVNode(unref(IconArrowStrokeUp), { class: "arrow-icon arrow-down" })
                    ])
                  ])
                ])
              ])) : createCommentVNode("", true)
            ];
          }),
          _: 1
        })
      ])), [
        [unref(vClickOutside), closeNetworkPanel]
      ]) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
