import { lazy, Suspense } from "react";
import { type Video } from "../lib/api";
import { AddToPlaylistAt } from "./AddToPlaylist";
import VideoDetailsAt from "./VideoInfoCard";

// Lazy for the same reason DownloadButton's is: the dialog and its profile editor load only when
// someone downloads, not with every feed.
const DownloadDialog = lazy(() => import("./DownloadDialog"));

/** What a video menu row opened that outlives the menu: a panel anchored where the menu came from
 *  (the playlists, the details) or the download dialog. */
export type VideoFollowUpState =
  | { kind: "playlist" | "details"; video: Video; anchor: Element }
  | { kind: "download"; video: Video };

/** The one follow-up a video list has open, mounted once per list beside its menu (see
 *  `useVideoActions`) rather than once per card. */
export function VideoFollowUp({
  state,
  onClose,
}: {
  state: VideoFollowUpState;
  onClose: () => void;
}) {
  const { video } = state;
  if (state.kind === "download")
    return (
      <Suspense fallback={null}>
        <DownloadDialog source={video.id} title={video.title} onClose={onClose} />
      </Suspense>
    );
  if (state.kind === "playlist")
    return <AddToPlaylistAt videoId={video.id} anchor={state.anchor} onClose={onClose} />;
  return <VideoDetailsAt video={video} anchor={state.anchor} onClose={onClose} />;
}