import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { MediaStream } from '../../@types/types';
/**
 * Options for rendering `FlexibleVideo`.
 *
 * @interface FlexibleVideoOptions
 *
 * **Metrics:**
 * @property {number} customWidth Width for each tile.
 * @property {number} customHeight Height for each tile.
 * @property {number} rows Row count for the grid.
 * @property {number} columns Column count for the grid.
 *
 * **Content:**
 * @property {React.ReactNode[]} componentsToRender Elements rendered within the grid cells.
 * @property {React.ReactNode} [Screenboard] Optional overlay element drawn above the grid.
 *
 * **Appearance:**
 * @property {boolean} [showAspect=false] Forces a square container wrapper when `true`.
 * @property {string} [backgroundColor='transparent'] Background color for each cell.
 * @property {StyleProp<ViewStyle>} [style] Additional styles for the outer grid container.
 *
 * **Annotation:**
 * @property {boolean} [annotateScreenStream=false] Enables local screen annotation layout adjustments.
 * @property {MediaStream} [localStreamScreen] Local screen stream used for measurements while annotating.
 *
 * **Advanced Render Overrides:**
 * @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContent]
 * Customize the inner grid markup or overlay composition.
 * @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContainer]
 * Replace the entire outer container.
 */
export interface FlexibleVideoOptions {
    customWidth: number;
    customHeight: number;
    rows: number;
    columns: number;
    componentsToRender: React.ReactNode[];
    showAspect?: boolean;
    backgroundColor?: string;
    Screenboard?: React.ReactNode;
    annotateScreenStream?: boolean;
    localStreamScreen?: MediaStream;
    style?: StyleProp<ViewStyle>;
    renderContent?: (options: {
        defaultContent: JSX.Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => JSX.Element;
    renderContainer?: (options: {
        defaultContainer: JSX.Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => JSX.Element;
}
export type FlexibleVideoType = (options: FlexibleVideoOptions) => JSX.Element;
/**
 * FlexibleVideo renders a matrix of media tiles with optional screenboard overlays and local annotation sizing. It
 * mirrors the flexible layout used during screen-share sessions and supports override hooks for both content and
 * container customization.
 *
 * ### Key Features
 * - Grid layout for video tiles with explicit dimensions
 * - Optional Screenboard overlay for annotations or controls
 * - Annotation mode adjusts layout for local screen stream measurements
 * - Square aspect ratio wrapper available via `showAspect`
 * - Re-renders when column count changes
 *
 * ### Accessibility
 * - Maintains logical grid navigation order
 * - Overlay elements should include appropriate ARIA labels
 *
 * @example
 * ```tsx
 * // Basic video grid with screen share
 * <FlexibleVideo
 *   customWidth={320}
 *   customHeight={180}
 *   rows={2}
 *   columns={2}
 *   componentsToRender={[
 *     <VideoCard key="1" participant={participant1} />,
 *     <VideoCard key="2" participant={participant2} />,
 *     <VideoCard key="3" participant={participant3} />,
 *     <VideoCard key="4" participant={participant4} />,
 *   ]}
 *   Screenboard={<ScreenAnnotationOverlay />}
 *   backgroundColor="#000"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Annotation mode with local screen stream
 * <FlexibleVideo
 *   customWidth={640}
 *   customHeight={360}
 *   rows={1}
 *   columns={1}
 *   componentsToRender={[<ScreenShareView stream={screenStream} />]}
 *   annotateScreenStream
 *   localStreamScreen={localScreenStream}
 *   Screenboard={<DrawingToolbar />}
 *   renderContent={({ defaultContent, dimensions }) => (
 *     <View style={{ position: 'relative' }}>
 *       {defaultContent}
 *       <AnnotationCanvas width={dimensions.width} height={dimensions.height} />
 *     </View>
 *   )}
 * />
 * ```
 */
declare const FlexibleVideo: React.FC<FlexibleVideoOptions>;
export default FlexibleVideo;