import React, { useState, useRef, useContext } from 'react';
import { View } from 'react-native';
import { CometChatCallLogs } from '../CometChatCallLogs/CometChatCallLogs';
import { Style } from './style';
import { CometChatContext } from '../../shared';
import { CometChatCallLogDetails } from '../CometChatCallLogDetails/CometChatCallLogDetails';
export const CometChatCallLogsWithDetails = (props) => {
    const { call, callLogDetailsConfiguration, CallLogsConfiguration, onError } = props;
    const [showDetails, setShowDetails] = useState(call ? true : false);
    const selectedCall = useRef(call);
    const { theme } = useContext(CometChatContext);
    return (<View>
            <CometChatCallLogs onInfoIconPress={({ call }) => {
            selectedCall.current = call;
            setShowDetails(true);
        }} onError={onError} {...CallLogsConfiguration}/>
            {showDetails &&
            <View style={[Style.stackScreen, { backgroundColor: theme.palette.getBackgroundColor() }]}>
                    <CometChatCallLogDetails onError={onError} call={selectedCall.current} onBack={() => setShowDetails(false)} {...callLogDetailsConfiguration}/>
                </View>}
        </View>);
};
//# sourceMappingURL=CometChatCallLogsWithDetails.js.map