import { diffArrayChange, mount, shallowWatchArray } from "@/utils";
import TaggingComponent from "@/components/path/list.vue";
import { Path as PathData, paths } from "@/store/path";
import { sdk, Path, SDK } from "../sdk";
import { reactive, ref, watch, watchEffect } from "vue";
import { groupProxy } from "@/store/group";
import { isScenePlayRun, pauseScene, playScene } from "@/utils/full";
import { analysisPose, setPose } from ".";
import { custom, showPathsStack, showPathStack } from "@/env";

// -----------------导览线关联--------------------
export type PathNode = Path;
export type PathsNode = { node: PathNode; id: PathData["id"] }[];

const pathNodes = reactive(new Map<PathData, PathNode>());

export const getPathNode = (
  path: PathData | PathData["id"]
): undefined | PathNode => {
  if (typeof path !== "object") {
    path = paths.value.find((item) => item.id === path)!;
    if (!path) return void 0;
  }
  return pathNodes.get(path);
};

export const pathsGroup = groupProxy(() => {
  const nodes = [] as PathNode[];
  for (const path of paths.value) {
    const node = getPathNode(path);
    if (node) {
      nodes.push(node);
    }
  }
  return nodes;
});

watchEffect(() => {
  pathsGroup.visibility(custom.showPaths);
  if (custom.showPath) {
    const node = getPathNode(custom.showPath);
    node?.visibility(true);
    node?.fly()
    console.log('a1', node, custom.showPath)
  }
})

export const playScenePath = async (
  path: PathData,
  forceFull = false,
) => {
  const node = getPathNode(path)
  if (!node) return null;

  showPathsStack.push(ref(false))
  showPathStack.push(ref(path.id))

  
  let initPose: any;
  await playScene({
    play: () => {
      return new Promise(resolve => {
        initPose = analysisPose(sdk.getPose());
        node.play(resolve)
      })
    },
    pause: () => {
      setPose(initPose)
      node.pause();
    }
  }, forceFull)

  showPathsStack.pop()
  showPathStack.pop()
}

export const pauseScenePath = pauseScene
export const isScenePathPlayIng = isScenePlayRun


export const associationPaths = (sdk: SDK, el: HTMLDivElement) => {
  mount<PathsNode>(el, TaggingComponent, { paths }, (pathsNode) => {
    watch(
      () => {
        if (!pathsNode) return []
        pathsNode.forEach(i => !!i?.id)
        return pathsNode
      },
      (nodes, oldNodes = []) => {
        const { added, deleted } = diffArrayChange<PathsNode>(
          nodes,
          oldNodes as PathsNode
        );
        for (const add of added) {
          if (add) {
            const path = paths.value.find((item) => item.id === add.id)!;
            pathNodes.set(path, add.node);
          }
        }
        for (const del of deleted) {
          if (del) {
            const path = paths.value.find((item) => item.id === del.id)!;
            pathNodes.delete(path);
          }
        }
      },
      {immediate: true}
    );
  });
};