import { useState, useEffect, useCallback } from 'react';
import { useApi } from './useApi';

interface UseSecureImageReturn {
  imageUrl: string | null;
  loading: boolean;
  error: Error | null;
}

export function useSecureImage(url: string): UseSecureImageReturn {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const { getSecureImage } = useApi();

  const fetchImage = useCallback(async () => {
    if (!url) {
      setLoading(false);
      return;
    }

    try {
      setLoading(true);
      setError(null);

      // Fetch image with authentication
      const blob = await getSecureImage(url);

      // Create blob URL
      const blobUrl = URL.createObjectURL(blob);
      setImageUrl(blobUrl);
    } catch (err) {
      console.error('Error fetching image:', err);
      const errorMessage = err instanceof Error ? err.message : 'Failed to load image';
      setError(new Error(errorMessage));
    } finally {
      setLoading(false);
    }
  }, [url, getSecureImage]);

  useEffect(() => {
    fetchImage();
  }, [fetchImage]);

  return {
    imageUrl,
    loading,
    error, // For debugging
  };
}