import { computed, ref, watch } from "vue";
import { Mode } from "@/views/graphic/menus";
import { accidentPhotos, types, AccidentPhoto } from "@/store/accidentPhotos";
import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
import { router } from "@/router";
import { getId } from "@/utils";
import { photos } from "@/store/photos";
import { trackMode } from "@/views/scene/trackMeasureWidth";

export const useData = () => {
  const data = ref<AccidentPhoto | RoadPhoto>(null);
  watch(
    () => ({
      params: router.currentRoute.value.params,
      accidentPhotos: accidentPhotos.value,
      roadPhotos: roadPhotos.value,
    }),
    ({ params }) => {
      if (trackMode.value) {
        return;
      }
      if (!params.action) {
        data.value = null;
      } else if (params.action === "add") {
        const photo = photos.value.find((data) => data.id === params.id);
        if (!photo) {
          return;
        }
        data.value = {
          data: null,
          title: "",
          type: types[2],
          sceneData: {
            meterPerPixel: photo.meterPerPixel,
            measures: photo.measures,
            basePoints: photo.basePoints,
            baseLines: photo.baseLines,
            fixGraphs: photo.fixGraphs,
            fixPoints: photo.fixPoints,
          },
          photoUrl: photo.url,
          id: getId(),
          url: null,
          time: new Date().getTime(),
        };
      } else {
        const mode = Number(params.mode) as Mode;
        if (mode === Mode.Photo) {
          return (data.value = accidentPhotos.value.find(
            (data) => data.id === params.id
          ));
        } else {
          return (data.value = roadPhotos.value.find(
            (data) => data.id === params.id
          ));
        }
      }
    },
    { immediate: true }
  );

  return data;
};