useState.ts

import { computed, ref, type Ref, watch } from "vue";
import { useRouter } from "vue-router";
import { cloneDeep } from "lodash";
import * as d3 from "d3";
import {
  type Configuration,
  getConfiguration,
  getCurrentUser,
  type OtherUserAnnotations,
  type Recording,
  type SpectrogramAnnotation,
  type SpectrogramSequenceAnnotation,
  getComputedPulseContour,
  type ComputedPulseContour,
  getVettingDetailsForUser,
} from "../api/api";
import {
  interpolateCividis,
  interpolateViridis,
  interpolateInferno,
  interpolateMagma,
  interpolatePlasma,
  interpolateTurbo,
} from "d3-scale-chromatic";

const annotationState: Ref<AnnotationState> = ref("");
const creationType: Ref<"pulse" | "sequence"> = ref("pulse");
type LayersVis = "time" | "freq" | "species" | "grid" | "sequence" | "duration";
const layerVisibility: Ref<LayersVis[]> = ref([
  "sequence",
  "species",
  "duration",
  "freq",
]);
const colorScale: Ref<d3.ScaleOrdinal<string, string, never> | undefined> =
  ref();
const colorSchemes = [
  { value: "inferno", title: "Inferno", scheme: interpolateInferno },
  { value: "cividis", title: "Cividis", scheme: interpolateCividis },
  { value: "viridis", title: "Viridis", scheme: interpolateViridis },
  { value: "magma", title: "Magma", scheme: interpolateMagma },
  { value: "plasma", title: "Plasma", scheme: interpolatePlasma },
  { value: "turbo", title: "Turbo", scheme: interpolateTurbo },
];
const colorScheme: Ref<{
  value: string;
  title: string;
  scheme: (input: number) => string;
}> = ref(colorSchemes[0]);
const backgroundColor = ref("rgb(0, 0, 0)");
const selectedUsers: Ref<string[]> = ref([]);
const currentUser: Ref<string> = ref("");
const currentUserId: Ref<number | undefined> = ref(undefined);
const selectedId: Ref<number | null> = ref(null);
const selectedType: Ref<"pulse" | "sequence"> = ref("pulse");
const annotations: Ref<SpectrogramAnnotation[]> = ref([]);
const sequenceAnnotations: Ref<SpectrogramSequenceAnnotation[]> = ref([]);
const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
const sharedList: Ref<Recording[]> = ref([]);
const recordingList: Ref<Recording[]> = ref([]);
const currentRecordingId: Ref<number | undefined> = ref(undefined);
const recordingTagList: Ref<string[]> = ref([]);
const nextShared: Ref<Recording | false> = ref(false);
const scaledVals: Ref<{ x: number; y: number }> = ref({ x: 1, y: 1 });
const viewCompressedOverlay = ref(false);
const sideTab: Ref<"annotations" | "recordings"> = ref("annotations");
const configuration: Ref<Configuration> = ref({
  display_pulse_annotations: true,
  display_sequence_annotations: true,
  spectrogram_view: "compressed",
  spectrogram_x_stretch: 2.5,
  run_inference_on_upload: true,
  create_pulse_annotations_from_batbot: false,
  default_color_scheme: "inferno",
  default_spectrogram_background_color: "rgb(0, 0, 0)",
  is_admin: false,
  mark_annotations_completed_enabled: false,
  non_admin_upload_enabled: true,
});
const scaledWidth = ref(0);
const scaledHeight = ref(0);
const measuring: Ref<boolean> = ref(false);
const frequencyRulerY: Ref<number> = ref(0);
const toggleMeasureMode = () => {
  measuring.value = !measuring.value;
};
const drawingBoundingBox = ref(false);
const boundingBoxError = ref("");
const toggleDrawingBoundingBox = () => {
  drawingBoundingBox.value = !drawingBoundingBox.value;
};

const fixedAxes = ref(true);
const toggleFixedAxes = () => {
  fixedAxes.value = !fixedAxes.value;
};

const computedPulseContours: Ref<ComputedPulseContour[]> = ref([]);
// Initial contour state is off; not persisted or loaded from localStorage.
const contoursEnabled = ref(false);
const imageOpacity = ref(1.0);
const contourOpacity = ref(1.0);
const contoursLoading = ref(false);
// Default mask overlay to visible at 50% opacity.
const viewMaskOverlay = ref(true);
const maskOverlayOpacity = ref(0.5);
// Waveplot below compressed spectrogram; on by default when available.
const viewWaveplot = ref(true);
const setContoursEnabled = (value: boolean) => {
  contoursEnabled.value = value;
};
async function loadContours(recordingId: number) {
  contoursLoading.value = true;
  computedPulseContours.value = await getComputedPulseContour(recordingId);
  contoursLoading.value = false;
}
function clearContours() {
  computedPulseContours.value = [];
}

const reviewerMaterials = ref("");

const transparencyThreshold = ref(0); // 0-100 percentage

const FILTER_TAG_STORAGE_KEY = "bataiFilterTags";
const SHARED_FILTER_TAG_STORAGE_KEY = "bataiSharedFilterTags";
const MAP_FILTER_BOUNDS_STORAGE_KEY = "bataiMapFilterBounds";

const filterTags: Ref<string[]> = ref([]);
const sharedFilterTags: Ref<string[]> = ref([]);
const showSubmittedRecordings = ref(false);

/** Current spectrogram recording filename (for app bar display). Set by Spectrogram view, cleared when not on spectrogram. */
const spectrogramFilename: Ref<string> = ref("");

type AnnotationState = "" | "editing" | "creating" | "disabled";
export default function useState() {
  const setAnnotationState = (state: AnnotationState) => {
    annotationState.value = state;
  };
  function toggleLayerVisibility(value: LayersVis) {
    const index = layerVisibility.value.indexOf(value);
    const clone = cloneDeep(layerVisibility.value);
    if (index === -1) {
      // If the value is not present, add it
      clone.push(value);
    } else {
      // If the value is present, remove it
      clone.splice(index, 1);
    }
    if (value === "time" && clone.includes("duration")) {
      const durationInd = layerVisibility.value.indexOf("duration");
      clone.splice(durationInd, 1);
    }
    if (value === "duration" && clone.includes("time")) {
      const timeInd = layerVisibility.value.indexOf("time");
      clone.splice(timeInd, 1);
    }
    layerVisibility.value = clone;
  }
  const setSelectedUsers = (newUsers: string[]) => {
    selectedUsers.value = newUsers;
  };

  function createColorScale(userEmails: string[]) {
    colorScale.value = d3
      .scaleOrdinal<string>()
      .domain(userEmails)
      .range(
        d3.schemeCategory10.filter(
          (color) => color !== "red" && color !== "cyan" && color !== "yellow",
        ),
      );
  }

  function setSelectedId(
    id: number | null,
    annotationType?: "pulse" | "sequence",
  ) {
    selectedId.value = id;
    if (annotationType) {
      selectedType.value = annotationType;
    }
  }
  watch(sharedList, () => {
    const filtered = sharedList.value.filter(
      (item) => !item.userMadeAnnotations,
    );
    if (filtered.length > 0) {
      nextShared.value = filtered[0];
    } else {
      nextShared.value = false;
    }
  });

  async function loadConfiguration() {
    configuration.value = (await getConfiguration()).data;
  }

  async function loadCurrentUser() {
    const userInfo = (await getCurrentUser()).data;
    currentUser.value = userInfo.name;
    currentUserId.value = userInfo.id;
  }

  /**
   * Function used to determine whether or not we are currently looking
   * at an NABat-specific view.
   *
   * returns `true` if looking at an NABat view, `false` otherwise
   */
  function isNaBat(): boolean {
    const router = useRouter();
    return router.currentRoute.value.fullPath.includes("nabat");
  }

  // Server filters by exclude_submitted when "Show submitted" is unchecked; we refetch on toggle.
  const myRecordingsDisplay = computed(() => recordingList.value);
  const sharedRecordingsDisplay = computed(() => sharedList.value);

  async function loadReviewerMaterials() {
    // Only make this request if vetting is enabled and a user is logged in
    if (!configuration.value.mark_annotations_completed_enabled) return;
    if (currentUserId.value === undefined) return;

    const vettingDetails = await getVettingDetailsForUser(currentUserId.value);
    if (vettingDetails) {
      reviewerMaterials.value = vettingDetails.reference_materials;
    }
  }

  function saveFilterTags() {
    localStorage.setItem(
      FILTER_TAG_STORAGE_KEY,
      JSON.stringify(filterTags.value),
    );
    localStorage.setItem(
      SHARED_FILTER_TAG_STORAGE_KEY,
      JSON.stringify(sharedFilterTags.value),
    );
  }

  function loadFilterTags() {
    filterTags.value = JSON.parse(
      localStorage.getItem(FILTER_TAG_STORAGE_KEY) || "[]",
    );
    sharedFilterTags.value = JSON.parse(
      localStorage.getItem(SHARED_FILTER_TAG_STORAGE_KEY) || "[]",
    );
  }

  function saveMapFilterBounds(bounds: [number, number, number, number]) {
    if (
      !bounds ||
      bounds.length !== 4 ||
      bounds.some((n) => !Number.isFinite(n))
    ) {
      return;
    }
    localStorage.setItem(MAP_FILTER_BOUNDS_STORAGE_KEY, JSON.stringify(bounds));
  }

  function clearMapFilterBounds() {
    localStorage.removeItem(MAP_FILTER_BOUNDS_STORAGE_KEY);
  }

  function loadMapFilterBounds(): [number, number, number, number] | null {
    try {
      const raw = localStorage.getItem(MAP_FILTER_BOUNDS_STORAGE_KEY);
      if (!raw) return null;

      const parsed: unknown = JSON.parse(raw);
      if (!Array.isArray(parsed) || parsed.length !== 4) return null;

      const nums = parsed.map((v) => (typeof v === "number" ? v : Number(v)));
      if (nums.some((n) => !Number.isFinite(n))) return null;

      return nums as [number, number, number, number];
    } catch {
      return null;
    }
  }

  return {
    annotationState,
    creationType,
    setAnnotationState,
    toggleLayerVisibility,
    layerVisibility,
    createColorScale,
    colorScale,
    measuring,
    toggleMeasureMode,
    frequencyRulerY,
    drawingBoundingBox,
    boundingBoxError,
    toggleDrawingBoundingBox,
    colorSchemes,
    colorScheme,
    backgroundColor,
    setSelectedUsers,
    selectedUsers,
    currentUser,
    currentUserId,
    setSelectedId,
    loadConfiguration,
    loadCurrentUser,
    isNaBat,
    // State Passing Elements
    annotations,
    configuration,
    sequenceAnnotations,
    otherUserAnnotations,
    selectedId,
    selectedType,
    sharedList,
    recordingList,
    recordingTagList,
    nextShared,
    scaledVals,
    viewCompressedOverlay,
    sideTab,
    scaledWidth,
    scaledHeight,
    fixedAxes,
    toggleFixedAxes,
    transparencyThreshold,
    contoursEnabled,
    imageOpacity,
    contourOpacity,
    contoursLoading,
    setContoursEnabled,
    loadContours,
    clearContours,
    computedPulseContours,
    showSubmittedRecordings,
    myRecordingsDisplay,
    sharedRecordingsDisplay,
    currentRecordingId,
    reviewerMaterials,
    loadReviewerMaterials,
    viewMaskOverlay,
    maskOverlayOpacity,
    viewWaveplot,
    filterTags,
    sharedFilterTags,
    saveFilterTags,
    loadFilterTags,
    saveMapFilterBounds,
    clearMapFilterBounds,
    loadMapFilterBounds,
    spectrogramFilename,
  };
}