calendar/apps/web/modules/insights/hooks/useDefaultRoutingForm.ts

import { usePathname, useRouter } from "next/navigation";
import { useEffect, useRef } from "react";

import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { trpc } from "@calcom/trpc/react";

export function useDefaultRoutingForm({
  userId,
  teamId,
  isAll,
  routingFormId,
  onRoutingFormChange,
}: {
  userId: number | null | undefined;
  teamId: number | null | undefined;
  isAll: boolean;
  routingFormId: string | null | undefined;
  onRoutingFormChange: (formId: string) => void;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useCompatSearchParams();
  const isRoutingInsights = pathname?.includes("/insights/routing");
  const hasSetDefault = useRef(false);

  // Query to get routing forms list
  const { data: routingForms } = trpc.viewer.insights.getRoutingFormsForFilters.useQuery(
    {
      userId: userId ?? undefined,
      teamId: teamId ?? undefined,
      isAll,
    },
    {
      enabled: isRoutingInsights,
    }
  );

  // Get the most popular form
  const mostPopularForm = routingForms?.length
    ? [...routingForms].sort((a, b) => (b._count?.responses ?? 0) - (a._count?.responses ?? 0))[0]
    : null;

  // Effect to set default routing form only once when the page loads
  useEffect(() => {
    if (isRoutingInsights && !routingFormId && mostPopularForm && !hasSetDefault.current) {
      hasSetDefault.current = true;
      const newSearchParams = new URLSearchParams(searchParams?.toString() ?? undefined);
      newSearchParams.set("routingFormId", mostPopularForm.id);
      router.push(`${pathname}?${newSearchParams.toString()}`);
      onRoutingFormChange(mostPopularForm.id);
    }
  }, [
    isRoutingInsights,
    routingFormId,
    mostPopularForm,
    pathname,
    searchParams,
    router,
    onRoutingFormChange,
  ]);

  return { routingForms, mostPopularForm };
}