import { useMutation } from "@tanstack/react-query";
import { useAuthToken } from "../hooks/use-root-data";
import {
  ImageUploadResponse,
  MediaUploadImageUsageEnum,
} from "../../src/api/types";
import { createMediaManagementApi } from "~/utils/api-client-factory";

interface ImageUploadParams {
  file: File;
  usageType: MediaUploadImageUsageEnum;
}

/**
 * Custom hook to upload image using React Query
 */
export const useImageUpload = () => {
  const token = useAuthToken();

  return useMutation({
    mutationFn: async ({
      file,
      usageType,
    }: ImageUploadParams): Promise<ImageUploadResponse> => {
      if (!token) throw new Error("Authentication required");

      const api = createMediaManagementApi(token);

      // Create FormData for file upload
      const formData = new FormData();
      formData.append("file", file, file.name);
      formData.append("usageType", usageType);

      // Use the generated API method with custom init overrides to handle multipart/form-data
      return await api.mediaUploadImage(
        {
          file: formData as unknown as Blob,
          usage: usageType,
        },
        async (context) => {
          // Remove Content-Type header to let browser set it with boundary
          const { "Content-Type": _, ...otherHeaders } =
            context.init.headers || {};

          return {
            ...context.init,
            headers: otherHeaders,
            body: formData,
          };
        }
      );
    },
  });
};