import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { createWSClient, wsLink } from "@trpc/client"
import { ReactNode, useState } from "react"
import { trpc } from "./trpc"


export interface TRPCClientProviderProps {
    children?: ReactNode
}


export function TRPCClientProvider({ children }: TRPCClientProviderProps) {

    const [queryClient] = useState(new QueryClient())
    const [wsClient] = useState(createWSClient({ url: "ws://localhost:8080" }))

    const [trpcClient] = useState(trpc.createClient({
        links: [
            // httpBatchLink({
            //     url: "http://localhost:8080/rpc",
            //     headers: async () => ({}),
            // }),

            wsLink({ client: wsClient }),
        ]
    }))


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

}