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

const Context = createContext<CustomerQuerySession | null>(null);
export function CustomerQueryProvider({ children }: { children: OctaneNode }) {
  const [session] = useState(() => new CustomerQuerySession());
  useEffect(() => {
    // Query already observes tab visibility; also handle returning to this window.
    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 useCustomerQuerySession() {
  const session = useContext(Context);
  if (!session) throw new Error("Customer query provider is missing");
  useSyncExternalStore(
    session.subscribe,
    session.getSnapshot,
    session.getSnapshot,
  );
  return session;
}