import { AbsoluteFill, Composition, getInputProps } from "remotion";
import { Overlay } from "./Overlay";
import React, { useState, useEffect } from "react";
import { TestVideo } from "./Video";

// Composite component that combines TestVideo with Overlay
const VideoComponents: React.FC<{ inputProps: any }> = ({ inputProps }) => {
  return (
    <AbsoluteFill>
      <TestVideo videoUrl={inputProps && inputProps.video_url} />
      <Overlay
        scenes={inputProps && inputProps.scenes}
        title={inputProps && inputProps.title}
      />
    </AbsoluteFill>
  );
};

export const RemotionRoot: React.FC = () => {
  const scenes = getInputProps() as any;
  console.log(scenes);

  // Ensure totalDuration is positive by taking the absolute value
  const duration = Math.abs(scenes.totalDuration || 0);
  const totalDurationInFrames = Math.max(Math.ceil(duration * 24), 100);

  console.log(scenes.totalDuration, totalDurationInFrames);
  return (
    <Composition
      id="test"
      component={VideoComponents}
      durationInFrames={totalDurationInFrames}
      fps={24}
      width={1280}
      height={720}
      // width={720}
      // height={1366}
      defaultProps={{
        inputProps: scenes,
      }}
    />
  );
};