import type { FC } from "react";
import { Composition } from "remotion";
import { FORMATS, FPS, type FormatName } from "./brand/tokens";
import { IMAGES, IMAGE_IDS } from "./content/images";
import { LANGS } from "./content/videos";
import { ImagePost } from "./images/ImagePost";
import { VIDEOS } from "./registry";
import { SHOT_FRAMES } from "./films/shot";
import { ServiceVideo, videoDuration } from "./slides/ServiceVideo";

const FORMAT_NAMES = Object.keys(FORMATS) as FormatName[];
/** Images are posted in the feed: 4:5, and square for places that crop. */
const IMAGE_FORMATS = ["feed", "square"] as const;

/** Videos are `<VideoId>-<language>-<format>`, images `<ImageId>-<language>-<feed|square>`. */
export const Root: FC = () => (
  <>
    {VIDEOS.flatMap((video) =>
      LANGS.flatMap((lang) =>
        FORMAT_NAMES.map((format) => (
          <Composition
            key={`${video.id}-${lang}-${format}`}
            id={`${video.id}-${lang}-${format}`}
            component={() => <ServiceVideo video={video} lang={lang} />}
            durationInFrames={videoDuration(video)}
            fps={FPS}
            width={FORMATS[format].width}
            height={FORMATS[format].height}
          />
        )),
      ),
    )}
    {IMAGE_IDS.flatMap((id) =>
      LANGS.flatMap((lang) =>
        IMAGE_FORMATS.map((format) => (
          // A poster is a film at one of its frames, so it needs the film's length; a card is a single frame.
          <Composition
            key={`${id}-${lang}-${format}`}
            id={`${id}-${lang}-${format}`}
            component={() => <ImagePost id={id} lang={lang} />}
            durationInFrames={IMAGES[id].poster ? SHOT_FRAMES : 1}
            fps={FPS}
            width={FORMATS[format].width}
            height={FORMATS[format].height}
          />
        )),
      ),
    )}
  </>
);