import { defineComponent, ref, computed, watch, reactive, unref, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass, withDirectives, isRef, vModelCheckbox, createTextVNode, nextTick } from "vue";
import { storeToRefs } from "pinia";
import IconButton from "../common/base/IconButton.vue.mjs";
import SvgIcon from "../common/base/SvgIcon.vue.mjs";
import BasicBeautyIcon from "../common/icons/BasicBeautyIcon.vue.mjs";
import { useI18n } from "../../locales/index.mjs";
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from "@tencentcloud/tuiroom-engine-js";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import Dialog from "../common/base/Dialog/index.mjs";
import TuiButton from "../common/base/Button.vue.mjs";
import Slider from "../common/base/Slider.vue.mjs";
import CloseBeautyIcon from "../common/icons/CloseBeautyIcon.vue.mjs";
import SmootherBeautyIcon from "../common/icons/SmootherBeautyIcon.vue.mjs";
import WhiteningBeautyIcon from "../common/icons/WhiteningBeautyIcon.vue.mjs";
import RuddyBeautyIcon from "../common/icons/RuddyBeautyIcon.vue.mjs";
import ResetIcon from "../common/icons/ResetIcon.vue.mjs";
import CompareIcon from "../common/icons/CompareIcon.vue.mjs";
import useGetRoomEngine from "../../hooks/useRoomEngine.mjs";
import { useBasicStore } from "../../stores/basic.mjs";
import { isMobile } from "../../utils/environment.mjs";
import { TRTCBeautyStyle } from "../../constants/room.mjs";
const _hoisted_1 = {
  key: 0,
  class: "basicBeauty-control-container"
};
const _hoisted_2 = {
  id: "test-preview",
  class: "test-preview"
};
const _hoisted_3 = { class: "text" };
const _hoisted_4 = {
  key: 0,
  class: "degree"
};
const _hoisted_5 = { class: "text" };
const _hoisted_6 = { class: "text-value" };
const _hoisted_7 = { class: "text" };
const _hoisted_8 = {
  key: 1,
  class: "mask"
};
const _hoisted_9 = {
  key: 2,
  class: "spinner"
};
const _hoisted_10 = { class: "setting" };
const _hoisted_11 = { class: "setting-header" };
const _hoisted_12 = { class: "setting-container" };
const _hoisted_13 = ["onClick"];
const _hoisted_14 = { class: "setting-item-icon" };
const _hoisted_15 = { class: "footer" };
const _hoisted_16 = { class: "mirror-container" };
const _hoisted_17 = { class: "mirror-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BasicBeauty",
  setup(__props) {
    const roomEngine = useGetRoomEngine();
    const basicStore = useBasicStore();
    const { isLocalStreamMirror } = storeToRefs(basicStore);
    const { t } = useI18n();
    const isShowDegree = ref(false);
    const componentConfig = roomService.componentManager.getComponentConfig("BasicBeauty");
    const isAllowed = computed(
      () => roomService.roomStore.localStream.hasVideoStream
    );
    watch(isLocalStreamMirror, async (val) => {
      var _a;
      const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
      if (!isMobile) {
        await (trtcCloud == null ? void 0 : trtcCloud.setLocalRenderParams({
          mirrorType: val ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
          rotation: TRTCVideoRotation.TRTCVideoRotation0,
          fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill
        }));
      }
    });
    const appliedBasicBeautyItem = ref("close");
    const selectBasicBeautyItem = ref(
      "close"
    );
    const isDialogVisible = ref(false);
    const isShowResetDialog = ref(false);
    const isLoading = ref(false);
    const sliderValue = ref(0);
    const beautyLevels = reactive({
      close: 0,
      smoother: 0,
      whitening: 0,
      ruddy: 0
    });
    const beautyOptionList = [
      { value: "close", text: "Close", icon: CloseBeautyIcon },
      { value: "smoother", text: "Smoother", icon: SmootherBeautyIcon },
      { value: "whitening", text: "Whitening", icon: WhiteningBeautyIcon },
      { value: "ruddy", text: "Ruddy", icon: RuddyBeautyIcon }
    ];
    const openSettingPanel = async () => {
      var _a;
      roomService.basicBeauty.initBasicBeauty();
      isDialogVisible.value = true;
      isLoading.value = true;
      await nextTick();
      await ((_a = roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
        view: "test-preview"
      }));
      await applyBasicBeautyItem(appliedBasicBeautyItem.value);
      isLoading.value = false;
    };
    const closeSettingPanel = async () => {
      var _a;
      isDialogVisible.value = false;
      (_a = roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
      selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
    };
    const saveBasicBeautySetting = async () => {
      if (!isAllowed.value) return;
      appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
      if (selectBasicBeautyItem.value === "close") {
        await roomService.basicBeauty.setBasicBeauty(
          TRTCBeautyStyle.TRTCBeautyStyleNature,
          0,
          0,
          0
        );
      } else {
        await roomService.basicBeauty.setBasicBeauty(
          TRTCBeautyStyle.TRTCBeautyStyleNature,
          Math.floor(beautyLevels.smoother / 100 * 9),
          Math.floor(beautyLevels.whitening / 100 * 9),
          Math.floor(beautyLevels.ruddy / 100 * 9)
        );
      }
      closeSettingPanel();
    };
    const setBasicBeauty = async () => {
      await roomService.basicBeauty.setTestBasicBeauty(
        TRTCBeautyStyle.TRTCBeautyStyleNature,
        Math.floor(beautyLevels.smoother / 100 * 9),
        Math.floor(beautyLevels.whitening / 100 * 9),
        Math.floor(beautyLevels.ruddy / 100 * 9)
      );
    };
    const resetBasicBeauty = async () => {
      await roomService.basicBeauty.setTestBasicBeauty(
        TRTCBeautyStyle.TRTCBeautyStyleNature,
        0,
        0,
        0
      );
    };
    watch(sliderValue, async (newValue) => {
      if (selectBasicBeautyItem.value === "smoother") {
        beautyLevels.smoother = newValue;
      }
      if (selectBasicBeautyItem.value === "whitening") {
        beautyLevels.whitening = newValue;
      }
      if (selectBasicBeautyItem.value === "ruddy") {
        beautyLevels.ruddy = newValue;
      }
      await setBasicBeauty();
    });
    const applyBasicBeautyItem = async (type) => {
      if (type === "close") {
        await resetBasicBeauty();
        beautyLevels.smoother = 0;
        beautyLevels.whitening = 0;
        beautyLevels.ruddy = 0;
        sliderValue.value = 0;
      } else {
        sliderValue.value = beautyLevels[type];
      }
      isShowDegree.value = type !== "close";
      selectBasicBeautyItem.value = type;
      isLoading.value = false;
    };
    const handleShowResetDialog = () => {
      isShowResetDialog.value = true;
    };
    const handleResetBeauty = async () => {
      await resetBasicBeauty();
      beautyLevels.smoother = 0;
      beautyLevels.whitening = 0;
      beautyLevels.ruddy = 0;
      sliderValue.value = 0;
      isShowResetDialog.value = false;
    };
    const handleMouseDown = async () => {
      await resetBasicBeauty();
    };
    const handleMouseUp = async () => {
      await setBasicBeauty();
    };
    return (_ctx, _cache) => {
      return unref(componentConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(IconButton, {
          title: unref(t)("Beauty"),
          onClickIcon: openSettingPanel
        }, {
          default: withCtx(() => [
            createVNode(BasicBeautyIcon)
          ]),
          _: 1
        }, 8, ["title"]),
        createVNode(unref(Dialog), {
          modelValue: isDialogVisible.value,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isDialogVisible.value = $event),
          title: unref(t)("Beauty"),
          width: "600px",
          modal: true,
          "append-to-room-container": true,
          "close-on-click-modal": false,
          onClose: closeSettingPanel
        }, {
          default: withCtx(() => [
            createElementVNode("div", _hoisted_2, [
              createElementVNode("div", {
                class: "reset",
                onClick: handleShowResetDialog
              }, [
                createVNode(SvgIcon, { icon: ResetIcon }),
                createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Reset")), 1)
              ]),
              isShowDegree.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
                createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("Degree")), 1),
                createVNode(Slider, {
                  modelValue: sliderValue.value,
                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
                  class: "slider"
                }, null, 8, ["modelValue"]),
                createElementVNode("span", _hoisted_6, toDisplayString(sliderValue.value), 1)
              ])) : createCommentVNode("", true),
              createElementVNode("div", {
                class: "compare",
                onMousedown: handleMouseDown,
                onMouseup: handleMouseUp
              }, [
                createVNode(SvgIcon, { icon: CompareIcon }),
                createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("Compare")), 1)
              ], 32),
              isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("", true),
              isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_9)) : createCommentVNode("", true)
            ]),
            createElementVNode("div", _hoisted_10, [
              createElementVNode("div", _hoisted_11, toDisplayString(unref(t)("Beauty Effects")), 1),
              createElementVNode("div", _hoisted_12, [
                (openBlock(), createElementBlock(Fragment, null, renderList(beautyOptionList, (item) => {
                  return createElementVNode("div", {
                    key: item.value,
                    class: normalizeClass([
                      "setting-item",
                      selectBasicBeautyItem.value === item.value ? "active" : ""
                    ]),
                    onClick: ($event) => applyBasicBeautyItem(item.value)
                  }, [
                    createElementVNode("i", _hoisted_14, [
                      createVNode(SvgIcon, {
                        icon: item.icon
                      }, null, 8, ["icon"])
                    ]),
                    createElementVNode("span", null, toDisplayString(unref(t)(item.text)), 1)
                  ], 10, _hoisted_13);
                }), 64))
              ])
            ]),
            createElementVNode("div", _hoisted_15, [
              createElementVNode("div", _hoisted_16, [
                withDirectives(createElementVNode("input", {
                  type: "checkbox",
                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(isLocalStreamMirror) ? isLocalStreamMirror.value = $event : null)
                }, null, 512), [
                  [vModelCheckbox, unref(isLocalStreamMirror)]
                ]),
                createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Mirror")), 1)
              ]),
              createVNode(TuiButton, {
                class: "button",
                disabled: !isAllowed.value,
                onClick: saveBasicBeautySetting
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(t)("Save")), 1)
                ]),
                _: 1
              }, 8, ["disabled"]),
              createVNode(TuiButton, {
                class: "button",
                type: "primary",
                onClick: closeSettingPanel
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
                ]),
                _: 1
              })
            ])
          ]),
          _: 1
        }, 8, ["modelValue", "title"]),
        createVNode(unref(Dialog), {
          modelValue: isShowResetDialog.value,
          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isShowResetDialog.value = $event),
          title: unref(t)("Sure you want to reset the beauty effect?"),
          width: "480px",
          modal: true,
          "append-to-room-container": true,
          "close-on-click-modal": true
        }, {
          footer: withCtx(() => [
            createVNode(TuiButton, {
              size: "default",
              onClick: handleResetBeauty
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(unref(t)("Reset")), 1)
              ]),
              _: 1
            }),
            createVNode(TuiButton, {
              class: "cancel",
              size: "default",
              type: "primary",
              onClick: _cache[3] || (_cache[3] = ($event) => isShowResetDialog.value = false)
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
              ]),
              _: 1
            })
          ]),
          default: withCtx(() => [
            createElementVNode("span", null, toDisplayString(unref(t)("All beauty parameters will revert to default after reset")), 1)
          ]),
          _: 1
        }, 8, ["modelValue", "title"])
      ])) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
