import { AbsoluteFill, Series } from "remotion";
import { DURATIONS } from "./timing";
import { theme } from "./theme";
import { AudioTrack } from "./components/AudioTrack";
import { ColdOpen } from "./sequences/ColdOpen";
import { Promise as PromiseSeq } from "./sequences/Promise";
import { Pillar1Storms } from "./sequences/Pillar1Storms";
import { Pillar2Dispatch } from "./sequences/Pillar2Dispatch";
import { Pillar3Rails } from "./sequences/Pillar3Rails";
import { Pillar4Control } from "./sequences/Pillar4Control";
import { Pillar5Profit } from "./sequences/Pillar5Profit";
import { CraneClose } from "./sequences/CraneClose";

export const Film: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: theme.bg }}>
      <Series>
        <Series.Sequence durationInFrames={DURATIONS.coldOpen}><ColdOpen /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.promise}><PromiseSeq /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.pillar1}><Pillar1Storms /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.pillar2}><Pillar2Dispatch /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.pillar3}><Pillar3Rails /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.pillar4}><Pillar4Control /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.pillar5}><Pillar5Profit /></Series.Sequence>
        <Series.Sequence durationInFrames={DURATIONS.craneClose}><CraneClose /></Series.Sequence>
      </Series>
      <AudioTrack />
    </AbsoluteFill>
  );
};