import { setting } from "@/store";
import { nextTick, watchEffect } from "vue";
import { SDK, SettingResourceType } from "../sdk";
import { setPose } from ".";

export const associationSetting = (sdk: SDK, mountEl: HTMLDivElement) => {
  watchEffect(() => {
    setting.value?.fov && sdk.setCameraFov(setting.value.fov);
  });

  const stopWatchPose = watchEffect(() => {
    if (!setting.value?.pose) return;
    setPose(setting.value?.pose);
    nextTick(() => stopWatchPose());
  });

  watchEffect(() => {
    if (setting.value) {
      // const direEl = document.querySelector("#direction") as HTMLDivElement;
      // direEl.style.display = setting.value.openCompass ? "block" : "none";
    }
  });

  watchEffect(() => {
    console.log(setting.value!.back);
    const back = setting.value!.back || "map";
    sdk.setBackdrop(
      back,
      back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
      {}
    );
  });
};