"use client"

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { httpBatchLink } from "@trpc/client"
import { useState } from "react"

import { env } from "@/env/client"
import { transformer } from "@/server/transformer"

import { trpc } from "./client"

function initializeTrpcClient() {
  // Locally we set nextjs to run on port to 3000 so that we always guarantee
  //  that trpc and next are running on the same port.
  return trpc.createClient({
    links: [
      httpBatchLink({
        transformer,
        /**
         * This is locally in Next.js
         */
        url: `http://localhost:${env.NEXT_PUBLIC_PORT}/api/web/trpc`,
      }),
    ],
  })
}

export default function TrpcProvider({ children }: React.PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient({}))
  const [trpcClient] = useState(() => initializeTrpcClient())
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  )
}