import { useCurrentFrame, AbsoluteFill } from 'remotion';
import { Video } from '@remotion/media';
import type { TrackItem } from '../../../types/video';
import { interpolateScalar, interpolateVec3 } from '../../../lib/video/keyframeInterp';
import { transformOriginFromAnchor } from '../../../lib/video/spatialCss';

interface VideoRendererProps {
  item: TrackItem;
}

export function VideoRenderer({ item }: VideoRendererProps) {
  const localFrame = useCurrentFrame();

  const opacity = interpolateScalar(localFrame, item.keyframes.opacity ?? [], 1);
  const position = interpolateVec3(localFrame, item.keyframes.position ?? [], [
    item.spatial.x,
    item.spatial.y,
    item.spatial.z,
  ]);
  const rotation = interpolateVec3(localFrame, item.keyframes.rotation ?? [], item.spatial.rotation);
  const scale = interpolateVec3(localFrame, item.keyframes.scale ?? [], item.spatial.scale);
  const transformOrigin = transformOriginFromAnchor(item.spatial.anchor);

  const src = typeof item.props.src === 'string' ? item.props.src : null;
  const volume = typeof item.props.volume === 'number' ? item.props.volume : 1;
  const muted = item.props.muted === true;

  if (!src) {
    return (
      <AbsoluteFill data-track-item-id={item.id} style={{ display: 'grid', placeItems: 'center', color: '#888' }}>
        <span
          data-track-item-content-id={item.id}
          style={{
            opacity,
            transformOrigin,
            transform: `translate3d(${position[0]}px, ${position[1]}px, ${position[2]}px) rotateX(${rotation[0]}deg) rotateY(${rotation[1]}deg) rotateZ(${rotation[2]}deg) scale3d(${scale[0]}, ${scale[1]}, ${scale[2]})`,
          }}
        >
          [no video src]
        </span>
      </AbsoluteFill>
    );
  }

  return (
    <AbsoluteFill data-track-item-id={item.id} style={{ display: 'grid', placeItems: 'center' }}>
      <div
        data-track-item-content-id={item.id}
        style={{
          maxWidth: '100%',
          maxHeight: '100%',
          opacity,
          transformOrigin,
          transform: `translate3d(${position[0]}px, ${position[1]}px, ${position[2]}px) rotateX(${rotation[0]}deg) rotateY(${rotation[1]}deg) rotateZ(${rotation[2]}deg) scale3d(${scale[0]}, ${scale[1]}, ${scale[2]})`,
        }}
      >
        <Video
          src={src}
          volume={muted ? 0 : volume}
          style={{
            maxWidth: '100%',
            maxHeight: '100%',
          }}
        />
      </div>
    </AbsoluteFill>
  );
}
