import React from 'react';
import { AbsoluteFill, Composition } from 'remotion';
import { VideoLayer } from './components/VideoLayer';
import { Title, TitleStyle } from './components/Title';
import { Subtitles, SubtitleStyle } from './components/Subtitles';
import { CaptionsData } from './utils/captions';

export interface VideoProps {
  videoSrc: string;
  audioSrc?: string;
  captions?: CaptionsData;
  title?: string;
  secondaryTitle?: string;
  titleDuration?: number;
  titleDisplayMode?: 'short' | 'persistent';
  enableSubtitles?: boolean;
  subtitleStyle?: SubtitleStyle;
  titleStyle?: TitleStyle;
  secondaryTitleStyle?: TitleStyle;
  width?: number;
  height?: number;
  [key: string]: unknown;
}

/**
 * 主视频组件
 * 组合视频层、标题层和字幕层
 */
export const Video: React.FC<VideoProps> = ({
  videoSrc,
  audioSrc,
  captions,
  title,
  secondaryTitle,
  titleDuration = 4,
  titleDisplayMode = 'short',
  enableSubtitles = true,
  subtitleStyle,
  titleStyle,
  secondaryTitleStyle,
}) => {
  return (
    <AbsoluteFill style={{ backgroundColor: 'black' }}>
      {/* 底层：视频 */}
      <VideoLayer videoSrc={videoSrc} audioSrc={audioSrc} />

      {/* 中层：字幕 */}
      {enableSubtitles && captions && (
        <Subtitles captions={captions} style={subtitleStyle} />
      )}

      {/* 顶层：标题 */}
      {(title || secondaryTitle) && (
        <Title
          title={title || ''}
          secondaryTitle={secondaryTitle}
          duration={titleDuration}
          displayMode={titleDisplayMode}
          style={titleStyle}
          secondaryTitleStyle={secondaryTitleStyle}
        />
      )}
    </AbsoluteFill>
  );
};
