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

// B4 / UX-15: every page has exactly one `h1`. The shell renders the page's name as a visually hidden
// one; a view that shows its OWN title (a channel, a Plex show, a playlist) renders that as the page's
// `h1` through `PageHeading`, which says so here, and the shell drops its hidden one while it is
// mounted. The same shape as ./stickyTop: the element announces itself, no page opts out by hand.
const PageHeadingContext = createContext<(() => () => void) | null>(null);

export const PageHeadingProvider = PageHeadingContext.Provider;

/** Called by `PageHeading`: while mounted, the shell's hidden page name steps aside. */
export function useOwnPageHeading(): void {
  const register = useContext(PageHeadingContext);
  useLayoutEffect(() => register?.(), [register]);
}