import React from 'react';
import { requireNativeComponent, ViewProps } from 'react-native';
import type { VideoResolution } from './native/ZoomVideoSdk';

/**
 * Props for {@link BroadcastStreamingView}.
 */
type BroadcastStreamingViewProps = {
  /**
   * Video subscription resolution. Defaults to native SDK's auto/720P.
   */
  videoResolution?: VideoResolution;
} & ViewProps;

const NativeBroadcastStreamingView =
  requireNativeComponent<BroadcastStreamingViewProps>(
    'RNZoomBroadcastStreamingView'
  );

/**
 * Renders the active broadcast stream's video to its surface and plays
 * the broadcast audio through the device speaker.
 *
 * Prerequisites:
 *   1. The viewer is already in StreamingJoinStatus.Joined state — call
 *      `zoom.broadcastStreamingViewer.joinStreaming({ token, channelID })`
 *      first and wait for `EventType.onStreamingJoinStatusChanged` with
 *      status === StreamingJoinStatus.Joined before mounting this view.
 *   2. Unmount the view on Reconnecting / Failed / Left status — the
 *      native SDK auto-releases subscriptions on Reconnecting; remount
 *      when status returns to Joined.
 *
 * The view auto-subscribes video + audio with the SDK's singleton viewer
 * helper on mount and unsubscribes on unmount. Frames are rendered
 * directly on the native side — they do not round-trip through JS.
 */
export const BroadcastStreamingView = (props: BroadcastStreamingViewProps) => {
  return <NativeBroadcastStreamingView {...props} />;
};
