import { setting, sysTiles } from "@/store";
import { nextTick, watchEffect } from "vue";
import { SDK, SettingResourceType } from "../sdk";
import { setPose } from ".";
import { MapTile } from "@/api/map-tile";

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

  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(() => {
    let tile: MapTile | undefined
    if (setting.value?.mapId) {
      tile = sysTiles.value.find(item => item.id === setting.value?.mapId)
    }
    if (!tile && setting.value?.back) {
      const back = setting.value!.back;
      console.log('setBack')
      sdk.setBackdrop(
        back,
        back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
        {}
      );
      return;
    } else if (!tile) {
      tile = sysTiles.value[0]
    }


    if (tile) {
      console.log('切换瓦片图', tile.mapUrls)
      sdk.changeMapTile && sdk.changeMapTile(tile.mapUrls)
    }
  });
};