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

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);
      if (params.testMap) {
        sdk.changeMapTile([
          {
            tempUrl: `//wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}&layer=6&token=YOUR_API_KEY`, //style=6是卫星,7是标准
            maximumLevel: 18,
          },
          {
            tempUrl: `//wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}&layer=6&token=YOUR_API_KEY`, //style=6是卫星,7是标准
            maximumLevel: 18,
          },
        ]);
      } else {
        sdk.changeMapTile && sdk.changeMapTile(tile.mapUrls);
      }
      sdk.setBackdrop("map", SettingResourceType.map, {});
    }
  });
};