import { Clapperboard } from "lucide-react";
import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
import type { ModuleDef } from "../../lib/moduleDef";
import { PLEX_KEYS, PLEX_SEARCH_KEYS, PLEX_SUB_KEY } from "../../lib/plexUrlState";
import { PlexStore } from "./PlexStore";

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

// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
export const plexModule: ModuleDef = {
  id: "plex",
  labelKey: "plex.navLabel",
  railKey: "nav.rail.plex",
  icon: Clapperboard,
  gate: (me) => me.plex_enabled,
  Rail,
  Page: lazyWithPreloadAlongside(() => import("./PlexBrowse"), Rail),
  maxWidth: "100rem",
  Store: PlexStore,
  urlKeys: [...PLEX_KEYS, ...PLEX_SEARCH_KEYS, PLEX_SUB_KEY],
};