manage/frontend/src/hooks/useWidgets.ts

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
	createWidgetInstance,
	createWidgetReference,
	deleteWidgetInstance,
	deleteWidgetReference,
	detachWidgetReference,
	fetchBuiltinWidgetKinds,
	fetchWidgetData,
	fetchWidgetInstances,
	fetchWidgetReferences,
	updateWidgetInstance,
	updateWidgetReference,
} from "../api/widgets";
import type { WidgetInstanceInput } from "../types";

export function useWidgetInstances(
	serviceId?: string,
	scope?: "dashboard" | "service",
) {
	return useQuery({
		queryKey: ["widgets", "instances", serviceId ?? null, scope ?? null],
		queryFn: () => fetchWidgetInstances(serviceId, scope),
		refetchInterval: 60_000,
	});
}

export function useWidgetData(widgetId: string, refreshInterval: number) {
	return useQuery({
		queryKey: ["widgets", "data", widgetId],
		queryFn: () => fetchWidgetData(widgetId),
		refetchInterval: refreshInterval || false,
		enabled: !!widgetId,
		retry: 1,
	});
}

export function useSaveWidgetInstance() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: (input: WidgetInstanceInput) =>
			input.id ? updateWidgetInstance(input) : createWidgetInstance(input),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets", "instances"] });
		},
	});
}

export function useDeleteWidgetInstance() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: (widgetId: string) => deleteWidgetInstance(widgetId),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets", "instances"] });
		},
	});
}

export function useBuiltinWidgetKinds() {
	return useQuery({
		queryKey: ["widgets", "builtin"],
		queryFn: fetchBuiltinWidgetKinds,
		staleTime: 5 * 60 * 1000,
	});
}

export function useWidgetReferences(dashboardScope: string | undefined) {
	return useQuery({
		queryKey: ["widgets", "references", dashboardScope ?? null],
		queryFn: () => fetchWidgetReferences(dashboardScope!),
		enabled: !!dashboardScope,
		refetchInterval: 60_000,
	});
}

export function useCreateWidgetReference() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: createWidgetReference,
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets", "references"] });
		},
	});
}

export function useDeleteWidgetReference() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: deleteWidgetReference,
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets", "references"] });
		},
	});
}

export function useDetachWidgetReference() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: detachWidgetReference,
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets"] });
		},
	});
}

export function useUpdateWidgetReference() {
	const queryClient = useQueryClient();
	return useMutation({
		mutationFn: ({
			referenceId,
			sortOrder,
		}: {
			referenceId: string;
			sortOrder: number;
		}) => updateWidgetReference(referenceId, sortOrder),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["widgets", "references"] });
		},
	});
}