export const customLink: TRPCLink<AppRouter> = () => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ next, op }) => {
    // this is when passing the result to the next link
    // each link needs to return an observable which propagates results
    return observable((observer) => {
      console.log("performing operation:", op);
      const unsubscribe = next(op).subscribe({
        next(value) {
          //console.log("we received value", value);
          observer.next(value);
        },
        error(err) {
          // console.log("we received error", err);
          observer.error(err);
          if (err?.data?.code === "UNAUTHORIZED") {
            const win: Window = window;
            win.location = "/sign-in";
          }
        },
        complete() {
          observer.complete();
        },
      });
      return unsubscribe;
    });
  };
};


export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data de-serialization from the server
       * @see https://trpc.io/docs/data-transformers
       **/
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server
       * @see https://trpc.io/docs/links
       * */
      links: [
        customLink,
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            const token = window.localStorage.getItem("token");
            if (token) {
              return {
                Authorization: "Bearer " + token,
              };
            }
            return {};
          },
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

export function TrpcProvider({ children }: { children: React.ReactNode }): JSX.Element {
  const queryClient = useMemo(
    () =>
      new QueryClient({
        queryCache: new QueryCache({
          onError: (error) => {
            console.log(error.message);
			console.log("Printing error");
          },
        }),
        mutationCache: new MutationCache({
          onError: (error) => {
            console.log(error.message);
			console.log("Printing mutation error");
          },
        }),
      }),
    []
  );
  const trpcClient = useMemo(
    () =>
      trpcQuery.createClient(),
    []
  );
  return (
    <trpcQuery.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </trpcQuery.Provider>
  );
}

export const trpcQuery = createTRPCReact<AppRouter>();