import { watch, inject, markRaw, ref } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import hexToRgb from "@/util/hexToRgb";

export default function useForgeSprite() {
  const store = useAlarmStore();
  const { subscribeData } = inject("system_deviceList");
  const forgeViewer = ref(null);
  const dataVizExtn = ref(null);
  const updateDataVisualization = async (viewer) => {
    if (!forgeViewer.value) {
      forgeViewer.value = markRaw(viewer);
    }

    const dataVisualization = await NOP_VIEWER.loadExtension(
      "Autodesk.DataVisualization"
    );
    dataVizExtn.value = markRaw(dataVisualization);
  };

  const onSpriteClicked = (event) => {
    event.hasStopped = true;
    const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
    modalContent.value = data;
    store.getDbIdStore(data.forge_dbid);
    toggleModal(event.originalEvent);
  };
  // 創建 sprites
  const createSprites = async () => {
    const DataVizCore = Autodesk.DataVisualization.Core;
    const viewableType = DataVizCore.ViewableType.SPRITE;
    let spriteColor = new THREE.Color(0xffffff);
    const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
    const spriteIconUrl = `${BASEURL}/hotspot.svg`;
    const style = new DataVizCore.ViewableStyle(
      viewableType,
      spriteColor,
      spriteIconUrl
    );
    const viewableData = new DataVizCore.ViewableData();
    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
    subscribeData.value?.forEach((d, index) => {
      const position = d.device_coordinate_3d;
      style.color = new THREE.Color(hexToRgb(d.device_normal_color));
      const viewable = new DataVizCore.SpriteViewable(
        position,
        style,
        d.spriteDbId
      );
      viewableData.addViewable(viewable);
    });
    await viewableData.finish();
    dataVizExtn.value.addViewables(viewableData);

    NOP_VIEWER.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
    NOP_VIEWER.addEventListener(
      Autodesk.Viewing.SELECTION_CHANGED_EVENT,
      onSpriteClicked
    );
  };

  const fitToView = () => {
    const { x, y, z } = JSON.parse(searchParams.value.camera_position);
    const newPosition = new THREE.Vector3(x, y, z); //!<<< 相机的新位置

    const {
      x: x1,
      y: y1,
      z: z1,
    } = JSON.parse(searchParams.value.target_position); //!<<< 计算新焦点位置
    const newTarget = new THREE.Vector3(x1, y1, z1); //!<<< 焦點的新位置

    NOP_VIEWER.navigation.getCamera().setView({
      position: newPosition.clone(),
      target: newTarget.clone(),
    });
    setTimeout(() => {
      updateDbidPosition(NOP_VIEWER, subscribeData.value);
    }, 700);
  };

  const hideAllObjects = () => {
    const tree = NOP_VIEWER.model?.getData().instanceTree;
    const allDbIdsStr = Object.keys(tree.nodeAccess.dbIdToIndex);
    for (var i = 0; i < allDbIdsStr.length; i++) {
      NOP_VIEWER.hide(parseInt(allDbIdsStr[i]));
    }

    subscribeData.value.forEach((value, index) => {
      NOP_VIEWER.show(value.forge_dbid);
    });

    NOP_VIEWER.impl.invalidate(true);
  };

  return {
    createSprites,
    updateDataVisualization,
    hideAllObjects,
  };
}
