import React, {type CSSProperties, type ReactNode} from "react";
import {useCurrentFrame, useVideoConfig} from "remotion";
import {cameraTransform, focusStyle, inOut, phase, type CameraPose, type MotionTiming} from "./core.js";

export type FocusPullProps = MotionTiming & {children: ReactNode; direction?: "out" | "in"; blur?: number; dim?: number; style?: CSSProperties};
export function FocusPull({children, at = 0, duration = 0.7, direction = "out", blur = 6, dim = 0.45, style}: FocusPullProps) {
  const p = inOut(phase(useCurrentFrame(), useVideoConfig().fps, at, duration));
  if (direction !== "out" && direction !== "in") throw new TypeError("direction must be out or in.");
  return <div style={{...style, ...focusStyle(direction === "out" ? p : 1 - p, blur, dim)}}>{children}</div>;
}

export type CameraRigProps = MotionTiming & {children: ReactNode; from: CameraPose; to: CameraPose; style?: CSSProperties};
/** The point in each pose is the world coordinate to place at the viewport center. */
export function CameraRig({children, from, to, at = 0, duration = 1.2, style}: CameraRigProps) {
  const frame = useCurrentFrame(), {fps, width, height} = useVideoConfig();
  const p = inOut(phase(frame, fps, at, duration));
  return <div style={{position: "absolute", inset: 0, ...style, transform: cameraTransform(from, to, p, width, height), transformOrigin: "0 0"}}>{children}</div>;
}