import { useEffect, useMemo, useRef, useState } from "react";
import { useFileUpload } from "./useFileUpload";
import { getSoundFileURL } from "../utils/utils";

export function useCachedSoundSrc(selected: string | undefined, fallbackUrl: string) {
  const isUploaded = !!selected && (selected.endsWith(".mp3") || selected.endsWith(".wav"));
  const fileName = isUploaded ? selected : undefined;

  const { query } = useFileUpload({
    queryKey: fileName ? [fileName] : undefined,
  });

  const [objectUrl, setObjectUrl] = useState<string>();
  const objRef = useRef<string | null>(null);

  useEffect(() => {
    const blob = query?.data;
    if (blob instanceof Blob) {
      if (objRef.current) URL.revokeObjectURL(objRef.current);
      const url = URL.createObjectURL(blob);
      objRef.current = url;
      setObjectUrl(url);
    } else {
      if (objRef.current) URL.revokeObjectURL(objRef.current);
      objRef.current = null;
      setObjectUrl(undefined);
    }
  }, [query?.data]);

  useEffect(() => {
    return () => {
      if (objRef.current) URL.revokeObjectURL(objRef.current);
    };
  }, []);

  const src = useMemo(() => {
    if (isUploaded && objectUrl) return objectUrl;
    if (!selected) return fallbackUrl;
    return getSoundFileURL(selected) ?? fallbackUrl;
  }, [isUploaded, objectUrl, selected, fallbackUrl]);

  return {
    src,
    isUploaded,
    isLoading: !!query?.isLoading,
    error: (query?.error as Error) || undefined,
  };
}