import { YouTubeIcon } from "../../lib/brandIcons";
import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
import type { ModuleDef } from "../../lib/moduleDef";
import { FEED_KEYS } from "../../lib/urlState";
import { YT_SEARCH_KEYS } from "../../lib/ytSearchUrlState";
import { FeedStore } from "./FeedStore";

// The rail loads with the page (lazyWithPreloadAlongside), so it never arrives after it.
const Rail = lazyWithPreload(() => import("./Sidebar"));

// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
export const feedModule: ModuleDef = {
  id: "feed",
  labelKey: "header.account.feed",
  railKey: "nav.rail.feed",
  icon: YouTubeIcon,
  Rail,
  Page: lazyWithPreloadAlongside(() => import("./FeedPage"), Rail),
  Store: FeedStore,
  // Its filters, and the live YouTube search shown in its place (lib/ytSearchUrlState).
  urlKeys: [...FEED_KEYS, ...YT_SEARCH_KEYS],
  typedUrlKeys: ["q", "yt"],
  playsVideos: true,
};

// The channel page: a feed scoped to one channel, opened over any page (App renders it in place of the
// page). Lazy like a page, and preloaded with them.
export const ChannelPage = lazyWithPreload(() => import("./ChannelPage"));