import { createContext, useContext, useLayoutEffect } from "react";

// A sticky element at the very top of the page scroller (a table's sticky header) and the
// scroller's top fade cannot coexist: the fade sits ON the header and flips on with the first
// scroll. Pages used to opt out by hand — a `fadeTop: false` in the module registry, plus an App
// special case for the Channels card layout, which has no sticky header — and the next table page
// would have re-acquired the defect with every lane green. Now the sticky element says so itself:
// while it is mounted the enclosing `PageScroller` keeps its top edge crisp.
const StickyTopContext = createContext<(() => () => void) | null>(null);

export const StickyTopProvider = StickyTopContext.Provider;

/** Call from a component that renders a sticky element at the top of the page scroller. */
export function useStickyTop(): void {
  const register = useContext(StickyTopContext);
  useLayoutEffect(() => register?.(), [register]);
}