import React from "react";
import {Audio} from "@remotion/media";
import {spring, staticFile, useCurrentFrame, useVideoConfig} from "remotion";
import type {VQSpeechEventLike} from "../types";
import {
  VQSpeechSubtitle,
  type VQSpeechSubtitleStyleOptions,
} from "./VQSpeechSubtitle";

export type VQSpeechOverlayProps<Speech extends VQSpeechEventLike> =
  Readonly<{
    speech: Speech;
    speakerName?: string;
    accentColor?: string;
    hasAudio?: (speech: Speech) => boolean;
    getAudioPath?: (speech: Speech) => string;
    subtitleOptions?: VQSpeechSubtitleStyleOptions;
    containerStyle?: React.CSSProperties;
  }>;

const defaultOverlayStyle: React.CSSProperties = {
  position: "absolute",
  bottom: 40,
  left: 0,
  right: 0,
  display: "flex",
  justifyContent: "center",
};

export const VQSpeechOverlay = <Speech extends VQSpeechEventLike,>({
  speech,
  speakerName,
  accentColor,
  hasAudio,
  getAudioPath,
  subtitleOptions,
  containerStyle,
}: VQSpeechOverlayProps<Speech>) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const subtitleProgress = spring({
    frame,
    fps,
    config: {damping: 20, mass: 0.7},
  });
  const text = speech.subtitle ?? speech.text;
  const shouldPlayAudio = hasAudio && getAudioPath && hasAudio(speech);

  return (
    <>
      {text ? (
        <div style={{...defaultOverlayStyle, ...containerStyle}}>
          <VQSpeechSubtitle
            text={text}
            progress={subtitleProgress}
            speakerName={speakerName}
            accentColor={accentColor}
            {...subtitleOptions}
          />
        </div>
      ) : null}
      {shouldPlayAudio ? <Audio src={staticFile(getAudioPath(speech))} /> : null}
    </>
  );
};