import { useMemo, type ReactNode } from "react";
import { parseFeedView, type FeedView } from "../lib/feedView";
import { LS } from "../lib/storage";
import { usePref } from "../lib/usePref";
import {
  FeedViewActionsContext,
  FeedViewStateContext,
  type FeedViewActions,
} from "./feedViewContext";

// Owns the feed's view mode (the card/row/tile density switcher), lifted out of App so both the feed
// page and the channel page read it via hooks instead of prop-drilling `view`/`setView` through App.
// Split State + Actions contexts, mirroring the other providers; composed in main.tsx around <App/>.
//
// The view mode is an account PREFERENCE, not a filter: it persists to the server on pick and follows
// the account across devices. usePref carries that server-sync (seeded from the server pref, with the
// localStorage mirror as the fallback) so this provider is just the two contexts over it.
//
// The contexts + hooks live in feedViewContext.ts.

export function FeedViewProvider({ children }: { children: ReactNode }) {
  // parseFeedView also maps the pre-0.45 "grid"/"list" values forward (idempotent for current values).
  const [view, setView] = usePref<FeedView>("view", "cards", {
    localKey: LS.feedView,
    parse: parseFeedView,
  });

  const actions = useMemo<FeedViewActions>(() => ({ setView }), [setView]);

  return (
    <FeedViewActionsContext.Provider value={actions}>
      <FeedViewStateContext.Provider value={view}>{children}</FeedViewStateContext.Provider>
    </FeedViewActionsContext.Provider>
  );
}