Mav-Mobile-UI/src/hooks/useCameraZoom.ts

import {
  useMutation,
  useQuery,
  type QueryFunctionContext,
} from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config";
import type { zoomConfig, ZoomInOptions } from "../types/types";

async function zoomIn(options: ZoomInOptions) {
  const response = await fetch(
    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`
  );
  if (!response.ok) {
    throw new Error("Cannot reach camera zoom endpoint");
  }

  return response.json();
}

async function fetchZoomInConfig({
  queryKey,
}: QueryFunctionContext<[string, zoomConfig]>) {
  const [, { camera }] = queryKey;
  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
  if (!response.ok) {
    throw new Error("Cannot get camera zoom settings");
  }
  return response.text();
}
//change to string
export const useCameraZoom = (options: zoomConfig) => {
  const mutation = useMutation({
    mutationKey: ["zoomIn"],
    mutationFn: (options: ZoomInOptions) => zoomIn(options),
  });

  const query = useQuery({
    queryKey: ["fetchZoomInConfig", options],
    queryFn: fetchZoomInConfig,
  });
  return { mutation, query };
};