import { useQuery } from '@tanstack/react-query';

import { useStores } from '@/app/(root)/AppProviders';

export const useParentClip = ({ clipId }: { clipId: string }) => {
  const { clips } = useStores();
  const { data: parentClip, isLoading } = useQuery({
    queryKey: ['parentClip', clipId],
    queryFn: async () => {
      try {
        const { data } = await clips.apiClient.GET('/api/clips/parent', {
          params: {
            query: {
              clip_id: clipId,
            },
          },
        });

        // Return the data if it has an id OR if it has user information (link only parent clip)
        return data?.id || data?.user_handle ? data : null;
      } catch (error) {
        return null;
      }
    },
    enabled: !!clipId,
  });
  return { parentClip, isLoadingParentClip: isLoading };
};

export default useParentClip;