'use client'
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
import { httpBatchLink } from "@trpc/client";
import React, { useState } from "react"
import superjson from "superjson";
import { trpc } from "./Client";
import getBaseUrl from "~/app/_trpc/GetBaseUrl";
let clientQueryClient: QueryClient | undefined = undefined;
const makeQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      experimental_prefetchInRender: true
    }
  }
});
function getQueryClient() {
  if (typeof window === "undefined") {
    // Server: always make a new query client
    return makeQueryClient();
  } else {
    // Browser: make a new query client if we don't already have one
    if (!clientQueryClient) clientQueryClient = makeQueryClient();
    return clientQueryClient;
  }
}
export default function TrpcProvider({ children }: { children: React.ReactNode }) {
  console.log("provider calls get base url")
  const baseUrl = getBaseUrl()
  console.log("provider got baseurl:", baseUrl)
  const queryClient = getQueryClient();
  const [trpcClient] = useState(() => {
    return trpc.createClient({
      links: [
        httpBatchLink({
          url: `${baseUrl}/api/trpc`,
          transformer: superjson,
        }),
      ],
    })
  });

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryStreamedHydration>
          {children}
        </ReactQueryStreamedHydration>
      </QueryClientProvider>
    </trpc.Provider>
  )
}