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;
      sdk.setBackdrop(
        back,
        back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
        {}
      );
      return;
    } else if (!tile) {
      tile = sysTiles.value[0]
    }


      // sdk.changeMapTile && sdk.changeMapTile([
        // 谷歌-栅格瓦片
        // {tempUrl: 'https://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', maximumLevel: 18},
        // 谷歌-卫星图
        // {tempUrl: 'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', maximumLevel: 18},
        // 谷歌-卫星图+标签
        // {tempUrl: 'https://mt0.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', maximumLevel: 18},
        // 地形图
        // {tempUrl: 'https://mt0.google.com/vt/lyrs=t&x={x}&y={y}&z={z}', maximumLevel: 18},
        // 仅道路
        // {tempUrl: 'https://mt0.google.com/vt/lyrs=h&x={x}&y={y}&z={z}', maximumLevel: 18},
      // ])

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