import {
  createContext,
  useContext,
  useEffect,
  useState,
  useSyncExternalStore,
  type OctaneNode,
} from "octane";
import { focusManager, QueryClientProvider } from "@octanejs/tanstack-query";
import { PublisherQuerySession } from "./publisher-query-session";

const Context = createContext<PublisherQuerySession | null>(null);
export function PublisherQueryProvider({ children }: { children: OctaneNode }) {
  const [session] = useState(() => new PublisherQuerySession());
  useEffect(() => {
    const focus = () => focusManager.onFocus();
    window.addEventListener("focus", focus);
    return () => {
      window.removeEventListener("focus", focus);
      session.client.clear();
    };
  }, [session]);
  return (
    <Context.Provider value={session}>
      <QueryClientProvider client={session.client}>
        {children}
      </QueryClientProvider>
    </Context.Provider>
  );
}
export function usePublisherSession() {
  const session = useContext(Context);
  if (!session) throw new Error("Publisher Query provider is missing");
  useSyncExternalStore(
    session.subscribe,
    session.getSnapshot,
    session.getSnapshot,
  );
  return session;
}