import { useQuery } from "@tanstack/react-query";
import { getReactors } from "~/fns/reactions";
import type { ReactionContent, ReactionSubject } from "~/lib/reactions";

const REACTORS_STALE_MS = 30 * 1000;

type Input = { owner: string; repo: string; subjectType: ReactionSubject; subjectId: string; content: ReactionContent };

export const reactorsQueryKey = (input: Input) =>
  ["reactors", input.subjectType, input.subjectId, input.content] as const;

/** Loads reactor names only once a pill is hovered or focused. */
export function useReactors(input: Input, enabled: boolean) {
  return useQuery({
    queryKey: reactorsQueryKey(input),
    queryFn: () => getReactors({ data: input }),
    enabled,
    staleTime: REACTORS_STALE_MS,
  });
}