"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 _hoisted_1 = { class: "setting-popup-container" };
const _hoisted_2 = { class: "setting-popup-content" };
const _hoisted_3 = { class: "section-title" };
const _hoisted_4 = { class: "setting-section" };
const _hoisted_5 = { class: "setting-label" };
const _hoisted_6 = { class: "setting-value" };
const _hoisted_7 = { class: "setting-value-text" };
const _hoisted_8 = { class: "setting-item" };
const _hoisted_9 = { class: "section-title" };
const _hoisted_10 = { class: "setting-section" };
const _hoisted_11 = { class: "setting-label" };
const _hoisted_12 = { class: "resolution-popup-container" };
const _hoisted_13 = { class: "resolution-popup-content" };
const _hoisted_14 = ["onClick"];
const _hoisted_15 = { class: "resolution-item-text" };
const _hoisted_16 = { class: "quality-popup-container" };
const _hoisted_17 = { class: "quality-popup-content" };
const _hoisted_18 = { class: "section-title" };
const _hoisted_19 = { class: "quality-section" };
const _hoisted_20 = { class: "setting-label" };
const _hoisted_21 = { class: "setting-value" };
const _hoisted_22 = { class: "setting-label" };
const _hoisted_23 = { class: "packet-loss-container" };
const _hoisted_24 = { class: "packet-loss-item" };
const _hoisted_25 = { class: "item-value" };
const _hoisted_26 = { class: "packet-loss-item" };
const _hoisted_27 = { class: "item-value" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "SettingPopup",
  emits: ["close"],
  setup(__props, { emit: __emit }) {
    const { t } = uikitBaseComponentVue3.useUIKit();
    const {
      isFrontCamera,
      localMirrorType,
      switchMirror,
      localVideoQuality,
      updateVideoQuality,
      networkInfo
    } = room.useDeviceState();
    const emits = __emit;
    const isSettingPopupVisible = vue.ref(true);
    const isResolutionPopupVisible = vue.ref(false);
    const isQualityCheckPopupVisible = vue.ref(false);
    function handleSettingPopupClose() {
      isSettingPopupVisible.value = false;
      emits("close");
    }
    const isLocalMirror = vue.ref(isFrontCamera.value && localMirrorType.value !== room.MirrorType.Disable);
    vue.watch(localMirrorType, (value) => {
      isLocalMirror.value = isFrontCamera.value && value !== room.MirrorType.Disable;
    });
    async function handleLocalMirrorChange(value) {
      if (!isFrontCamera.value) {
        return;
      }
      if (value) {
        await switchMirror({ mirror: room.MirrorType.Enable });
        uikitBaseComponentVue3.TUIToast.success({ message: t("Setting.SetMirrorSuccess") });
      } else {
        await switchMirror({ mirror: room.MirrorType.Disable });
        uikitBaseComponentVue3.TUIToast.success({ message: t("Setting.CancelMirrorSuccess") });
      }
    }
    const resolutionOptions = vue.computed(() => [
      { label: t("Setting.LowDefinition"), value: room.VideoQuality.Quality360P },
      {
        label: t("Setting.StandardDefinition"),
        value: room.VideoQuality.Quality540P
      },
      { label: t("Setting.HighDefinition"), value: room.VideoQuality.Quality720P },
      {
        label: t("Setting.SuperDefinition"),
        value: room.VideoQuality.Quality1080P
      }
    ]);
    const currentResolutionLabel = vue.computed(
      () => {
        var _a;
        return (_a = resolutionOptions.value.find(
          (option) => option.value === localVideoQuality.value
        )) == null ? void 0 : _a.label;
      }
    );
    function handleResolutionClick(value) {
      updateVideoQuality({ quality: value });
      isResolutionPopupVisible.value = false;
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.createVNode(vue.unref(uikitBaseComponentVue3.TUIPopup), {
          visible: isSettingPopupVisible.value,
          "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => isSettingPopupVisible.value = $event),
          placement: "bottom",
          onClose: handleSettingPopupClose
        }, {
          default: vue.withCtx(() => [
            vue.createElementVNode("div", _hoisted_1, [
              vue.createElementVNode("div", {
                class: "popup-header",
                onClick: handleSettingPopupClose
              }, [
                vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowDown))
              ]),
              vue.createElementVNode("div", _hoisted_2, [
                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(vue.unref(t)("Setting.VideoSetting")), 1),
                vue.createElementVNode("div", _hoisted_4, [
                  vue.createElementVNode("div", {
                    class: "setting-item",
                    onClick: _cache[0] || (_cache[0] = ($event) => isResolutionPopupVisible.value = true)
                  }, [
                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(vue.unref(t)("Setting.Resolution")), 1),
                    vue.createElementVNode("div", _hoisted_6, [
                      vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(currentResolutionLabel.value), 1),
                      vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowStrokeSelectDown), { size: "12" })
                    ])
                  ]),
                  vue.createElementVNode("div", _hoisted_8, [
                    vue.createElementVNode("span", {
                      class: vue.normalizeClass(["setting-label", { disabled: !vue.unref(isFrontCamera) }])
                    }, vue.toDisplayString(vue.unref(t)("Setting.LocalMirror")), 3),
                    vue.createVNode(vue.unref(uikitBaseComponentVue3.TUISwitch), {
                      modelValue: isLocalMirror.value,
                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isLocalMirror.value = $event),
                      disabled: !vue.unref(isFrontCamera),
                      onChange: _cache[2] || (_cache[2] = ($event) => handleLocalMirrorChange($event))
                    }, null, 8, ["modelValue", "disabled"])
                  ])
                ]),
                vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(vue.unref(t)("Setting.OtherSetting")), 1),
                vue.createElementVNode("div", _hoisted_10, [
                  vue.createElementVNode("div", {
                    class: "setting-item",
                    onClick: _cache[3] || (_cache[3] = ($event) => isQualityCheckPopupVisible.value = true)
                  }, [
                    vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(vue.unref(t)("Setting.QualityCheck")), 1),
                    vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowStrokeSelectDown), {
                      size: "12",
                      class: "quality-check-arrow"
                    })
                  ])
                ])
              ])
            ])
          ]),
          _: 1
        }, 8, ["visible"]),
        vue.createVNode(vue.unref(uikitBaseComponentVue3.TUIPopup), {
          visible: isResolutionPopupVisible.value,
          "onUpdate:visible": _cache[6] || (_cache[6] = ($event) => isResolutionPopupVisible.value = $event),
          placement: "bottom",
          onClose: _cache[7] || (_cache[7] = ($event) => isResolutionPopupVisible.value = false)
        }, {
          default: vue.withCtx(() => [
            vue.createElementVNode("div", _hoisted_12, [
              vue.createElementVNode("div", {
                class: "popup-header",
                onClick: _cache[5] || (_cache[5] = ($event) => isResolutionPopupVisible.value = false)
              }, [
                vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowDown))
              ]),
              vue.createElementVNode("div", _hoisted_13, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(resolutionOptions.value, (option) => {
                  return vue.openBlock(), vue.createElementBlock("div", {
                    key: option.value,
                    class: vue.normalizeClass(["resolution-item", { selected: vue.unref(localVideoQuality) === option.value }]),
                    onClick: ($event) => handleResolutionClick(option.value)
                  }, [
                    vue.createElementVNode("span", _hoisted_15, vue.toDisplayString(option.label), 1)
                  ], 10, _hoisted_14);
                }), 128))
              ])
            ])
          ]),
          _: 1
        }, 8, ["visible"]),
        vue.createVNode(vue.unref(uikitBaseComponentVue3.TUIPopup), {
          visible: isQualityCheckPopupVisible.value,
          "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => isQualityCheckPopupVisible.value = $event),
          placement: "bottom",
          onClose: _cache[12] || (_cache[12] = ($event) => isQualityCheckPopupVisible.value = false)
        }, {
          default: vue.withCtx(() => {
            var _a, _b, _c;
            return [
              vue.createElementVNode("div", _hoisted_16, [
                vue.createElementVNode("div", {
                  class: "popup-header",
                  onClick: _cache[8] || (_cache[8] = ($event) => isQualityCheckPopupVisible.value = false)
                }, [
                  vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowDown))
                ]),
                vue.createElementVNode("div", _hoisted_17, [
                  vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(vue.unref(t)("Setting.NetworkQuality")), 1),
                  vue.createElementVNode("div", _hoisted_19, [
                    vue.createElementVNode("div", {
                      class: "quality-item",
                      onClick: _cache[9] || (_cache[9] = ($event) => isQualityCheckPopupVisible.value = true)
                    }, [
                      vue.createElementVNode("span", _hoisted_20, vue.toDisplayString(vue.unref(t)("Network.Latency")), 1),
                      vue.createElementVNode("span", _hoisted_21, vue.toDisplayString((_a = vue.unref(networkInfo)) == null ? void 0 : _a.delay) + " ms", 1)
                    ]),
                    vue.createElementVNode("div", {
                      class: "quality-item",
                      onClick: _cache[10] || (_cache[10] = ($event) => isQualityCheckPopupVisible.value = true)
                    }, [
                      vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(vue.unref(t)("Network.PacketLoss")), 1),
                      vue.createElementVNode("div", _hoisted_23, [
                        vue.createElementVNode("div", _hoisted_24, [
                          vue.createElementVNode("span", _hoisted_25, 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_26, [
                          vue.createElementVNode("span", _hoisted_27, vue.toDisplayString((_c = vue.unref(networkInfo)) == null ? void 0 : _c.downLoss) + "%", 1),
                          vue.createVNode(vue.unref(uikitBaseComponentVue3.IconArrowStrokeUp), { class: "arrow-icon arrow-down" })
                        ])
                      ])
                    ])
                  ])
                ])
              ])
            ];
          }),
          _: 1
        }, 8, ["visible"])
      ], 64);
    };
  }
});
exports.default = _sfc_main;
