import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { Socket } from 'socket.io-client';
import { SendMessageOptions } from '../../methods/messageMethods/sendMessage';
import { CoHostResponsibility, EventType, Message, Participant, ShowAlert } from '../../@types/types';
/**
 * Interface defining the props for the MessagesModal component.
 */
/**
 * Configuration options for the `MessagesModal` component.
 *
 * @interface MessagesModalOptions
 *
 * **Modal Control:**
 * @property {boolean} isMessagesModalVisible Controls visibility of the chat modal.
 * @property {() => void} onMessagesClose Invoked when the modal should close.
 *
 * **Messaging:**
 * @property {(options: SendMessageOptions) => Promise<void>} [onSendMessagePress=sendMessage] Handler triggered when sending a message.
 * @property {Message[]} messages Collection of messages to render within the panel.
 *
 * **Appearance:**
 * @property {'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'} [position='topRight'] Preferred anchor position.
 * @property {string} [backgroundColor='#f5f5f5'] Surface color of the modal.
 * @property {string} [activeTabBackgroundColor='#7AD2DCFF'] Highlight color for the active tab.
 * @property {StyleProp<ViewStyle>} [style] Additional styles merged into the modal container.
 *
 * **Session Context:**
 * @property {EventType} eventType Session type directing permissions and UI.
 * @property {string} member Display name of the current user.
 * @property {string} islevel Permission level for the current user.
 * @property {CoHostResponsibility[]} coHostResponsibility Matrix describing co-host capabilities.
 * @property {string} coHost Co-host identifier.
 * @property {string} roomName Active room identifier.
 * @property {Socket} socket Socket.io connection for real-time updates.
 * @property {string} chatSetting Chat configuration toggle (e.g., `'all' | 'hostOnly'`).
 *
 * **Direct Messaging:**
 * @property {boolean} startDirectMessage Flag that determines whether direct message mode is active.
 * @property {Participant | null} directMessageDetails Target participant for direct messaging.
 * @property {(start: boolean) => void} updateStartDirectMessage State setter for direct message mode.
 * @property {(participant: Participant | null) => void} updateDirectMessageDetails Setter for direct message context.
 *
 * **Alerts:**
 * @property {ShowAlert} [showAlert] Optional alert callback for user feedback.
 *
 * **Advanced Render Overrides:**
 * @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContent]
 * Override for the default chat panel layout.
 * @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContainer]
 * Override for wrapping the modal with custom UI (e.g., animated containers).
 */
export interface MessagesModalOptions {
    isMessagesModalVisible: boolean;
    onMessagesClose: () => void;
    onSendMessagePress?: (options: SendMessageOptions) => Promise<void>;
    messages: Message[];
    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
    backgroundColor?: string;
    activeTabBackgroundColor?: string;
    eventType: EventType;
    member: string;
    islevel: string;
    coHostResponsibility: CoHostResponsibility[];
    coHost: string;
    startDirectMessage: boolean;
    directMessageDetails: Participant | null;
    updateStartDirectMessage: (start: boolean) => void;
    updateDirectMessageDetails: (participant: Participant | null) => void;
    showAlert?: ShowAlert;
    roomName: string;
    socket: Socket;
    chatSetting: string;
    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 MessagesModalType = (options: MessagesModalOptions) => JSX.Element;
/**
 * MessagesModal centralizes broadcast and direct messaging in a responsive modal. It adapts to event
 * context, offers tabs for chat segmentation, and coordinates direct-message flows with overrideable
 * handlers and layouts.
 *
 * ### Key Features
 * - Integrates with `sendMessage` by default but accepts custom handlers.
 * - Supports direct messaging mode with participant-specific metadata.
 * - Configurable positioning and theming for consistent branding.
 * - Uses `MessagePanel` to render messages with built-in tab management.
 * - Provides render overrides for both container and content.
 *
 * ### Accessibility
 * - Close button exposes descriptive labels for screen readers.
 * - Tab changes propagate via accessible Pressables inside `MessagePanel`.
 *
 * @param {MessagesModalOptions} props Modal configuration options.
 * @returns {JSX.Element} Rendered messages modal.
 *
 * @example Default configuration with built-in handlers.
 * ```tsx
 * <MessagesModal
 *   isMessagesModalVisible={visible}
 *   onMessagesClose={hide}
 *   messages={messages}
 *   eventType="conference"
 *   member={userName}
 *   islevel="1"
 *   coHostResponsibility={responsibilities}
 *   coHost={coHostName}
 *   startDirectMessage={false}
 *   directMessageDetails={null}
 *   updateStartDirectMessage={setStartDm}
 *   updateDirectMessageDetails={setDmDetails}
 *   roomName={roomId}
 *   socket={socket}
 *   chatSetting="default"
 * />
 * ```
 *
 * @example Custom send handler and styling.
 * ```tsx
 * <MessagesModal
 *   isMessagesModalVisible
 *   onMessagesClose={close}
 *   messages={messageHistory}
 *   onSendMessagePress={sendCustomMessage}
 *   eventType="webinar"
 *   member="host_01"
 *   islevel="2"
 *   backgroundColor="#101826"
 *   activeTabBackgroundColor="#3b82f6"
 *   style={{ borderRadius: 24 }}
 *   {...dmProps}
 * />
 * ```
 *
 * @example Animated container override.
 * ```tsx
 * <MessagesModal
 *   {...props}
 *   renderContainer={({ defaultContainer }) => (
 *     <FadeIn>{defaultContainer}</FadeIn>
 *   )}
 * />
 * ```
 */
declare const MessagesModal: React.FC<MessagesModalOptions>;
export default MessagesModal;