"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const IconButton = require("../common/base/IconButton.vue.js");
const VirtualBackgroundIcon = require("../common/icons/VirtualBackgroundIcon.vue.js");
const index = require("../../locales/index.js");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
require("@tencentcloud/tuiroom-engine-js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const index$1 = require("../common/base/Dialog/index.js");
const closeVirtualBackground = require("../../assets/imgs/close-virtual-background.png.js");
const blurredBackground = require("../../assets/imgs/blurred-background.png.js");
const Button = require("../common/base/Button.vue.js");
const _hoisted_1 = {
  key: 0,
  class: "virtualBackground-control-container"
};
const _hoisted_2 = {
  id: "stream-preview",
  class: "stream-preview"
};
const _hoisted_3 = {
  key: 0,
  class: "mask"
};
const _hoisted_4 = {
  key: 1,
  class: "spinner"
};
const _hoisted_5 = { class: "setting" };
const _hoisted_6 = { class: "setting-item-icon" };
const _hoisted_7 = ["src"];
const _hoisted_8 = { class: "setting-item-icon" };
const _hoisted_9 = ["src"];
const _hoisted_10 = { class: "footer" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "VirtualBackground",
  setup(__props) {
    const { t } = index.useI18n();
    const componentConfig = roomService.roomService.componentManager.getComponentConfig("VirtualBackground");
    const isAllowed = Vue.computed(
      () => roomService.roomService.roomStore.localStream.hasVideoStream
    );
    const appliedBackground = Vue.ref("close");
    const selectedBackground = Vue.ref("close");
    const isDialogVisible = Vue.ref(false);
    const isLoading = Vue.ref(false);
    const openSettingPanel = async () => {
      var _a;
      roomService.roomService.virtualBackground.initVirtualBackground();
      isDialogVisible.value = true;
      isLoading.value = true;
      await Vue.nextTick();
      await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
        view: "stream-preview"
      }));
      await applyVirtualBackground(appliedBackground.value);
      isLoading.value = false;
    };
    const closeSettingPanel = async () => {
      var _a;
      isDialogVisible.value = false;
      (_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
      selectedBackground.value = appliedBackground.value;
    };
    const confirmVirtualBackground = async () => {
      if (!isAllowed.value) return;
      appliedBackground.value = selectedBackground.value;
      closeSettingPanel();
      if (selectedBackground.value === "blur") {
        await roomService.roomService.virtualBackground.toggleVirtualBackground(true);
      }
      if (selectedBackground.value === "close") {
        await roomService.roomService.virtualBackground.toggleVirtualBackground(false);
      }
    };
    const applyVirtualBackground = async (type) => {
      isLoading.value = true;
      try {
        selectedBackground.value = type;
        await roomService.roomService.virtualBackground.toggleTestVirtualBackground(
          type === "blur"
        );
      } finally {
        isLoading.value = false;
      }
    };
    return (_ctx, _cache) => {
      return Vue.unref(componentConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
        Vue.createVNode(IconButton.default, {
          title: Vue.unref(t)("VirtualBackground"),
          onClickIcon: openSettingPanel
        }, {
          default: Vue.withCtx(() => [
            Vue.createVNode(VirtualBackgroundIcon.default)
          ]),
          _: 1
        }, 8, ["title"]),
        Vue.createVNode(Vue.unref(index$1.default), {
          modelValue: isDialogVisible.value,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isDialogVisible.value = $event),
          title: Vue.unref(t)("VirtualBackground"),
          width: "600px",
          modal: true,
          "append-to-room-container": true,
          onClose: closeSettingPanel
        }, {
          default: Vue.withCtx(() => [
            Vue.createElementVNode("div", _hoisted_2, [
              isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3)) : Vue.createCommentVNode("", true),
              isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4)) : Vue.createCommentVNode("", true)
            ]),
            Vue.createElementVNode("div", _hoisted_5, [
              Vue.createElementVNode("div", {
                class: Vue.normalizeClass([
                  "setting-item",
                  selectedBackground.value === "close" ? "active" : ""
                ]),
                onClick: _cache[0] || (_cache[0] = ($event) => applyVirtualBackground("close"))
              }, [
                Vue.createElementVNode("i", _hoisted_6, [
                  Vue.createElementVNode("img", {
                    src: Vue.unref(closeVirtualBackground.default),
                    alt: "close",
                    style: { "width": "32px" }
                  }, null, 8, _hoisted_7)
                ]),
                Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Close")), 1)
              ], 2),
              Vue.createElementVNode("div", {
                class: Vue.normalizeClass([
                  "setting-item",
                  selectedBackground.value === "blur" ? "active" : ""
                ]),
                onClick: _cache[1] || (_cache[1] = ($event) => applyVirtualBackground("blur"))
              }, [
                Vue.createElementVNode("i", _hoisted_8, [
                  Vue.createElementVNode("img", {
                    src: Vue.unref(blurredBackground.default),
                    alt: "blurred"
                  }, null, 8, _hoisted_9)
                ]),
                Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("BlurredBackground")), 1)
              ], 2)
            ]),
            Vue.createElementVNode("div", _hoisted_10, [
              Vue.createVNode(Button.default, {
                class: "button",
                disabled: !isAllowed.value,
                onClick: confirmVirtualBackground
              }, {
                default: Vue.withCtx(() => [
                  Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Save")), 1)
                ]),
                _: 1
              }, 8, ["disabled"]),
              Vue.createVNode(Button.default, {
                class: "button",
                type: "primary",
                onClick: closeSettingPanel
              }, {
                default: Vue.withCtx(() => [
                  Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
                ]),
                _: 1
              })
            ])
          ]),
          _: 1
        }, 8, ["modelValue", "title"])
      ])) : Vue.createCommentVNode("", true);
    };
  }
});
exports.default = _sfc_main;
