const handleAvatarUpload = useCallback(async (file: File) => {
    try {
      setUploadLoading(true);
      const postUrl = await generateUploadUrl();
      // Step 2: POST the file to the URL
      const result = await fetch(postUrl, {
        method: "POST",
        headers: { "Content-Type": file!.type },
        body: file,
      });

      const { storageId } = await result.json();
      setStorageI(storageId);
    } catch (error) {
      toast("Something went wrong", {
        description: "Our support team has been notified",
      });
      console.error("Failed to update user profile", error);
    }
  }, []);

const handleAvatarUpload = useCallback(async (file: File) => {
    try {
      setUploadLoading(true);
      const postUrl = await generateUploadUrl();
      // Step 2: POST the file to the URL
      const result = await fetch(postUrl, {
        method: "POST",
        headers: { "Content-Type": file!.type },
        body: file,
      });

      const { storageId } = await result.json();
      setStorageI(storageId);
    } catch (error) {
      toast("Something went wrong", {
        description: "Our support team has been notified",
      });
      console.error("Failed to update user profile", error);
    }
  }, []);

  const [storageId, setStorageId] = useState('');
  const getImageUrl = useMutation(
    api.routes.userProfiles.queries.getImageUrl,
    {
      imageId: storageId
    }
  );

  const [storageId, setStorageId] = useState('');
  const getImageUrl = useMutation(
    api.routes.userProfiles.queries.getImageUrl,
    {
      imageId: storageId
    }
  );

export const getImageUrl = query({
  args: { imageId: v.id("_storage") },
  handler: async (ctx, args) => {
    return await ctx.storage.getUrl(args.imageId);
  },
});

export const getImageUrl = query({
  args: { imageId: v.id("_storage") },
  handler: async (ctx, args) => {
    return await ctx.storage.getUrl(args.imageId);
  },
});

const convexSiteUrl = import.meta.env.VITE_CONVEX_SITE_URL;

function Image({ storageId }: { storageId: string }) {
  // e.g. https://happy-animal-123.convex.site/getImage?storageId=456
  const getImageUrl = new URL(`${convexSiteUrl}/getImage`);
  getImageUrl.searchParams.set("storageId", storageId);

  return <img src={getImageUrl.href} height="300px" width="auto" />;
}

const convexSiteUrl = import.meta.env.VITE_CONVEX_SITE_URL;

function Image({ storageId }: { storageId: string }) {
  // e.g. https://happy-animal-123.convex.site/getImage?storageId=456
  const getImageUrl = new URL(`${convexSiteUrl}/getImage`);
  getImageUrl.searchParams.set("storageId", storageId);

  return <img src={getImageUrl.href} height="300px" width="auto" />;
}