import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./trpc";
import { constants } from "./constants";
import Cookies from "js-cookie";
import SuperJSON from "superjson";

export function TrpcProvider({ children }: { children: React.ReactNode }) {
	const [queryClient] = useState(() => new QueryClient());
	const [trpcClient] = useState(() =>
		trpc.createClient({
			links: [
				httpBatchLink({
					url: constants.trpcUrl,
					fetch: async (input, init) => {
						const response = await fetch(input, init);

						if (response.status === 401) {
							Cookies.remove("token");
							window.location.href = "/";
						}
						return response;
					},
					async headers() {
						return {
							authorization: Cookies.get("token")
								? `Bearer ${Cookies.get("token")}`
								: undefined,
						};
					},
					transformer: SuperJSON,
				}),
			],
		}),
	);
	return (
		<trpc.Provider client={trpcClient} queryClient={queryClient}>
			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
		</trpc.Provider>
	);
}