import { Series, AbsoluteFill } from "remotion";
import manifest from "./clips.manifest.json";
import { totalLiveFrames, type ClipsManifest } from "./clips";
import { DURATIONS } from "./timing";
import { ClipStage } from "./components/ClipStage";
import { AudioTrack } from "./components/AudioTrack";
import { Promise as PromiseSeq } from "./sequences/Promise";

const m = manifest as ClipsManifest;
export const LIVE_TOTAL = totalLiveFrames(m) + DURATIONS.promise;

export const LiveFilm: React.FC = () => {
  const [hero, ...rest] = m.clips; // landing-hero is first in the manifest
  return (
    <AbsoluteFill>
      <AudioTrack totalFrames={LIVE_TOTAL} />
      <Series>
        <Series.Sequence durationInFrames={hero.durationFrames}>
          <ClipStage clip={hero} />
        </Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.promise}>
          <PromiseSeq />
        </Series.Sequence>
        {rest.map((clip) => (
          <Series.Sequence key={clip.id} durationInFrames={clip.durationFrames}>
            <ClipStage clip={clip} />
          </Series.Sequence>
        ))}
      </Series>
    </AbsoluteFill>
  );
};