import {
  computed,
  nextTick,
  reactive,
  Ref,
  ref,
  watch,
  watchEffect,
} from "vue";
import { structureDraw } from "@/graphic";
import VectorType from "@/graphic/enum/VectorType";
import UIType from "@/graphic/enum/UIEvents";
import type { RoadPhoto } from "@/store/roadPhotos";
import type { AccidentPhoto } from "@/store/accidentPhotos";
import { api } from "@/store/sync";
import { genUseLoading } from "./useLoading.js";
import mitt from "mitt";

export const bus = mitt();
export type UITypeT = typeof UIType;
export type VectorTypeT = typeof VectorType;
export type FocusVector = {
  type: VectorTypeT[keyof VectorTypeT];
  category?: VectorTypeT[keyof VectorTypeT];
  vectorId: string;
};

const newsletter = ref<{
  selectUI?: UITypeT[keyof UITypeT];
  focusVector?: FocusVector;
}>({ selectUI: null, focusVector: null });

const changeIndex = ref(0);
export const changeStore = () => {
  changeIndex.value++;
};
export const useChange = (fn: () => void) => {
  let old;
  return watchEffect(() => {
    if (old !== changeIndex.value) {
      old = changeIndex.value;
      fn();
    }
  });
};

export const graphicState = ref({
  canRevoke: false,
  canRecovery: false,
  showBackImage: true,
  canAngleLocationMode: false,
  canVerticalMeasure: false,
  canAllLocationMode: false,
  existsBaseLine: false,
  continuedMode: false,
});

export const loadData = genUseLoading(
  async (data?: RoadPhoto, oldId?: RoadPhoto["id"]) => {
    if (data) {
      oldId && drawRef.value.load.clear();
      await drawRef.value.load.load(JSON.parse(JSON.stringify(data.data)), {
        ...data.sceneData,
        backImage: data.photoUrl,
      });
      bus.emit("graphicLoader");
      graphicState.value.canRecovery = false;
      graphicState.value.canRevoke = false;
    } else {
      drawRef.value.load.clear();
    }
  }
);

export const setCanvas = async (
  canvas: HTMLCanvasElement,
  data: Ref<AccidentPhoto | RoadPhoto>
) => {
  await import("../graphic/index.js").then((model) => {
    drawRef.value = model.structureDraw(canvas, newsletter, graphicState);

    watch(
      () => data.value?.id,
      (id, oldId) => {
        loadData(data.value, oldId);
      },
      { immediate: true, flush: "post" }
    );
  });
};

export const drawRef = ref<ReturnType<typeof structureDraw>>();

export const uiType = reactive({
  current: computed(() => newsletter.value.selectUI),
  change: (type: UITypeT[keyof UITypeT]) => {
    drawRef.value.uiControl.selectUI = type;
  },
});
export const currentVector = computed(() => newsletter.value.focusVector);

export { VectorType, UIType };