import { AbsoluteFill, Sequence } from "remotion";
import React, { useMemo } from "react";
import { loadFont } from "@remotion/google-fonts/Roboto";

const { fontFamily } = loadFont("normal", {
  subsets: ["latin"],
  weights: ["400", "700"],
});

const titleTextStyle: React.CSSProperties = {
  fontWeight: "bold",
  fontFamily,
  fontSize: 40,
  color: "#eeeeee",
};

const textStyle: React.CSSProperties = {
  fontWeight: "bold",
  fontFamily,
  fontSize: 30,
  color: "#eeeeee",
};

const secondaryTextStyle: React.CSSProperties = {
  fontWeight: "bold",
  fontFamily,
  fontSize: 20,
  color: "#aaaaaa",
};

export const Overlay: React.FC<{
  scenes: any[];
  title: string;
}> = ({ scenes, title }) => {
  let currentFrame = 0;
  const fps = 24;

  const container: React.CSSProperties = useMemo(() => {
    return {
      position: "absolute",
      borderRadius: 25,
      left: 45,
      bottom: 20,
      padding: 30,
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    };
  }, []);

  const titleContainer: React.CSSProperties = useMemo(() => {
    return {
      position: "absolute",
      borderRadius: 25,
      left: 45,
      top: 20,
      padding: 30,
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    };
  }, []);

  return (
    <AbsoluteFill>
      <div style={titleContainer}>
        <div style={titleTextStyle}>{title}</div>
      </div>
      {scenes.map((scene, index) => {
        const { duration, text, start } = scene;
        const fromFrame = start * fps;
        const toFrame = Math.floor(fromFrame + duration * fps);
        const durationInFrames = duration * fps - 1;
        if (durationInFrames <= 0) {
          return <></>;
        }
        const prevText = scenes[index - 1]?.text;
        const nextText = scenes[index + 1]?.text;
        currentFrame = toFrame;
        return (
          <Sequence
            key={index}
            from={fromFrame}
            durationInFrames={durationInFrames}
          >
            <div style={container}>
              <div style={secondaryTextStyle}>{prevText}</div>
              <div style={textStyle}>{text}</div>
              <div style={secondaryTextStyle}>{nextText}</div>
            </div>
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};