// to deal with the temperature heatmap
import { ref, watch, markRaw } from "vue";
import useSearchParams from "@/hooks/useSearchParam";
export default function useSystemHeatmap(updateHeatBarIsShow) {
  const { searchParams } = useSearchParams();
  // init heatmap
  const forgeViewer = ref(null);
  const dataVizExtension = ref(null);
  const deviceList = ref([]);
  const heatMaps = ref({});

  const initHeatMap = async (viewer) => {
    forgeViewer.value = markRaw(viewer);
    const dataVizExtn = await viewer.loadExtension(
      "Autodesk.DataVisualization"
    );
    dataVizExtension.value = markRaw(dataVizExtn);
  };
  const updateHeatMapData = (deviceArr) => {
    deviceList.value = Object.values(deviceArr).map((d) => ({
      ...d,
      id: d.device_number, // An ID to identify this device
      roomDbId: d.room_dbid,
      position: d.device_coordinate_3d, // World coordinates of this device
      sensorTypes: ["temperature"], // The types/properties this device exposes
      temp: 10,
      dbId: d.forge_dbid,
    }));
  };

  //create the heatmap
  function getSensorValue(device, sensorType, pointData) {
    const dev = deviceList.value.find(
      ({ device_number }) => device_number === device.id
    );
    console.log(9, device, dev);

    return (dev?.temp || 0) / 40;
  }

  const updateTemp = (device_number, temp) => {
    const subDevIndex = deviceList.value.findIndex(
      (d) => d.device_number === device_number
    );
    deviceList.value[subDevIndex] = { ...deviceList.value[subDevIndex], temp };
    dataVizExtension.value.updateSurfaceShading(getSensorValue);
  };

  const createHeatMap = async (heatMapName) => {
    // let dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
    // dataVizExtension.value = markRaw(dataVizExtn);

    const {
      SurfaceShadingData,
      SurfaceShadingPoint,
      SurfaceShadingNode,
      SurfaceShadingGroup,
    } = Autodesk.DataVisualization.Core;
    const shadingGroup = new SurfaceShadingGroup(`iot_heatmap_${heatMapName}`);
    const rooms = new Map();

    for (const { id, roomDbId, position, sensorTypes } of deviceList.value) {
      if (!id || roomDbId == -1 || !roomDbId) {
        continue;
      }

      if (!rooms.has(roomDbId)) {
        const room = new SurfaceShadingNode(id, roomDbId);
        shadingGroup.addChild(room);
        rooms.set(roomDbId, room);
      }
      const room = rooms.get(roomDbId);
      room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
    }

    const shadingData = new SurfaceShadingData();
    shadingData.addChild(shadingGroup);
    shadingData.initialize(forgeViewer.value?.model);

    await dataVizExtension.value.setupSurfaceShading(
      forgeViewer.value.model,
      shadingData
    );
    dataVizExtension.value.registerSurfaceShadingColors(
      "temperature",
      [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
    );
    dataVizExtension.value.renderSurfaceShading(
      `iot_heatmap_${heatMapName}`,
      "temperature",
      getSensorValue
    );

    console.log(dataVizExtension.value);
  };

  watch(deviceList, (newValue) => {
    console.log("熱圖", newValue);
    switch (parseInt(searchParams.value.option)) {
      case 2:
        createHeatMap("frozen");
        updateHeatBarIsShow(true);
        break;
      case 3:
        createHeatMap("gland");
        updateHeatBarIsShow(true);
        break;
      case 4:
        createHeatMap("packing");
        break;
      case 5:
        createHeatMap("formula");
        updateHeatBarIsShow(true);
        break;
      default:
        dataVizExtension.value?.removeSurfaceShading();
        updateHeatBarIsShow(false);
        break;
    }
  });

  return { updateHeatMapData, updateTemp, initHeatMap };
}
