/**
 * Sequence — Drop-in replacement for Remotion's <Sequence>.
 *
 * Mounts/unmounts children based on the current frame within the
 * composition. Provides a shifted frame context so children see
 * frame 0 when the Sequence starts.
 *
 * Props:
 * - from: Start frame (absolute)
 * - durationInFrames: How many frames this sequence lasts
 * - layout?: 'absolute-fill' (default) | 'none'
 * - name?: Debug label (unused in render)
 */
import React from 'react';
import { useCurrentFrame } from '../player/useCurrentFrame';
import { SequenceFrameContext } from '../player/PlayerContext';

interface SequenceProps {
  from: number;
  durationInFrames: number;
  layout?: 'absolute-fill' | 'none';
  name?: string;
  children: React.ReactNode;
  style?: React.CSSProperties;
}

export const Sequence: React.FC<SequenceProps> = ({
  from,
  durationInFrames,
  layout = 'absolute-fill',
  children,
  style,
}) => {
  const parentFrame = useCurrentFrame();

  // Not yet visible — unmount
  if (parentFrame < from) return null;

  // Past end — unmount
  if (parentFrame >= from + durationInFrames) return null;

  // Shift frame so children see 0 at sequence start
  const shiftedFrame = parentFrame - from;

  const content = (
    <SequenceFrameContext.Provider value={shiftedFrame}>
      {children}
    </SequenceFrameContext.Provider>
  );

  if (layout === 'none') {
    return content;
  }

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        ...style,
      }}
    >
      {content}
    </div>
  );
};
