import React from 'react';
import { Composition } from 'remotion';
import { WebsiteVideo } from './WebsiteVideo';
import sessionData from './session.json';
import { RecordingSession } from '../types/record-mode';

const FPS = 60;

export const RemotionRoot: React.FC = () => {
    // Calculate duration based on last event + padding
    const durationMs = (sessionData as unknown as RecordingSession).events.reduce((max, e) => {
        return Math.max(max, e.timestamp + (e.duration || 1000));
    }, 0);
    const durationInFrames = Math.ceil((durationMs + 2000) / 1000 * FPS);

    return (
        <>
            <Composition
                id="WebsiteVideo"
                component={WebsiteVideo}
                durationInFrames={durationInFrames}
                fps={FPS}
                width={1920}
                height={1080}
                defaultProps={{
                    session: sessionData as unknown as RecordingSession,
                    siteUrl: 'http://localhost:3000'
                }}
            />
        </>
    );
};