import React from 'react';
import { Socket } from 'socket.io-client';
import { ConnectSocketType } from '../../sockets/SocketManager';
import { ShowAlert } from '../../@types/types';
/**
 * Configuration parameters for WelcomePage component.
 *
 * @interface WelcomePageParameters
 *
 * **Branding:**
 * @property {string} [imgSrc='https://mediasfu.com/images/logo192.png'] - Logo image URL
 *
 * **Connection Management:**
 * @property {ConnectSocketType} connectSocket - Function to establish Socket.io connection
 * @property {(socket: Socket) => void} updateSocket - Updates socket instance in parent state
 *
 * **State Updates:**
 * @property {(visible: boolean) => void} updateIsLoadingModalVisible - Controls loading modal visibility
 * @property {(validated: boolean) => void} updateValidated - Updates validation state after successful connection
 * @property {(apiUserName: string) => void} updateApiUserName - Updates API username (event ID)
 * @property {(apiToken: string) => void} updateApiToken - Updates API token (secret key)
 * @property {(link: string) => void} updateLink - Updates event link/URL
 * @property {(roomName: string) => void} updateRoomName - Updates room name
 * @property {(userName: string) => void} updateMember - Updates participant name
 *
 * **User Feedback:**
 * @property {ShowAlert} [showAlert] - Alert display function for validation errors and feedback
 */
export interface WelcomePageParameters {
    /**
     * Source URL for the logo image.
     * Defaults to 'https://mediasfu.com/images/logo192.png' if not provided.
     */
    imgSrc?: string;
    /**
     * Function to display alert messages.
     */
    showAlert?: ShowAlert;
    /**
     * Function to toggle the visibility of the loading modal.
     */
    updateIsLoadingModalVisible: (visible: boolean) => void;
    /**
     * Function to establish a socket connection.
     */
    connectSocket: ConnectSocketType;
    /**
     * Function to update the socket instance in the parent state.
     */
    updateSocket: (socket: Socket) => void;
    /**
     * Function to update the validation state in the parent.
     */
    updateValidated: (validated: boolean) => void;
    /**
     * Function to update the API username in the parent state.
     */
    updateApiUserName: (apiUserName: string) => void;
    /**
     * Function to update the API token in the parent state.
     */
    updateApiToken: (apiToken: string) => void;
    /**
     * Function to update the event link in the parent state.
     */
    updateLink: (link: string) => void;
    /**
     * Function to update the room name in the parent state.
     */
    updateRoomName: (roomName: string) => void;
    /**
     * Function to update the member name in the parent state.
     */
    updateMember: (userName: string) => void;
}
/**
 * Configuration options for the WelcomePage component.
 *
 * @interface WelcomePageOptions
 *
 * **State Parameters:**
 * @property {WelcomePageParameters} parameters - Welcome page configuration and state handlers
 */
export interface WelcomePageOptions {
    /**
     * Parameters required by the WelcomePage component.
     */
    parameters: WelcomePageParameters;
}
export type WelcomePageType = (options: WelcomePageOptions) => JSX.Element;
/**
 * WelcomePage - Event credentials entry and validation screen
 *
 * WelcomePage is a React Native component that provides the initial entry point for
 * joining MediaSFU events. Users can enter credentials manually (event ID, secret, name)
 * or scan a QR code to auto-fill. It validates credentials, handles rate limiting,
 * and establishes the Socket.io connection before proceeding to the meeting.
 *
 * **Key Features:**
 * - Manual credential entry (Event ID, Secret, Name, optional Link)
 * - QR code scanning for auto-fill
 * - Camera permission handling
 * - Rate limiting (10 attempts per 3 hours)
 * - Socket.io connection establishment
 * - Persistent storage of attempt counts
 * - Loading state management
 * - Input validation and error feedback
 * - Support for custom event links
 *
 * **UI Customization:**
 * The WelcomePage layout and styling are fixed but can be customized by creating
 * a custom welcome page component and using it instead of this default one.
 *
 * @component
 * @param {WelcomePageOptions} props - Configuration options
 *
 * @returns {JSX.Element} Rendered welcome page
 *
 * @example
 * ```tsx
 * // Basic usage in main app component
 * import React, { useState } from 'react';
 * import { WelcomePage } from 'mediasfu-reactnative-expo';
 * import { connectSocket } from './sockets/SocketManager';
 *
 * function App() {
 *   const [socket, setSocket] = useState(null);
 *   const [validated, setValidated] = useState(false);
 *   const [credentials, setCredentials] = useState({});
 *
 *   const parameters = {
 *     imgSrc: 'https://example.com/logo.png',
 *     showAlert: ({ message, type }) => alert(message),
 *     updateIsLoadingModalVisible: setLoading,
 *     connectSocket: connectSocket,
 *     updateSocket: setSocket,
 *     updateValidated: setValidated,
 *     updateApiUserName: (name) => setCredentials(prev => ({ ...prev, apiUserName: name })),
 *     updateApiToken: (token) => setCredentials(prev => ({ ...prev, apiToken: token })),
 *     updateLink: (link) => setCredentials(prev => ({ ...prev, link })),
 *     updateRoomName: (room) => setCredentials(prev => ({ ...prev, roomName: room })),
 *     updateMember: (member) => setCredentials(prev => ({ ...prev, member })),
 *   };
 *
 *   if (validated) {
 *     return <MeetingRoom socket={socket} credentials={credentials} />;
 *   }
 *
 *   return <WelcomePage parameters={parameters} />;
 * }
 * ```
 *
 * @example
 * ```tsx
 * // With custom branding and alert handler
 * const customParameters = {
 *   imgSrc: 'https://mybrand.com/logo.png',
 *   showAlert: ({ message, type, duration }) => {
 *     Toast.show({ text: message, type, duration });
 *   },
 *   // ... other handlers
 * };
 *
 * return <WelcomePage parameters={customParameters} />;
 * ```
 */
declare const WelcomePage: React.FC<WelcomePageOptions>;
export default WelcomePage;