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