import React, { useContext, } from 'react';
import { MediaRoomContext } from '../services/MediaRoomService';
import { useDispatch, useSelector } from 'react-redux';
import { requestedJoinToStageState, RequestToJoinStageState, RequestToJoinType, requestToJoinType, } from '../store/participantSlice';
import { DyteViewTypes } from '../types/newTypes';
import { Alert, useWindowDimensions } from 'react-native';
import { Box, Button, Flex, Modal, Text } from '../themes/components';
import { ThemeContext } from 'styled-components';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import borderRadius from '../themes/foundations/borderRadius';
function RequestToJoinStageModal({ isMobile }) {
    const roomViewType = useSelector((state) => state.room.roomViewType);
    const joinToStageState = useSelector((state) => state.participant.requestToJoinStageState);
    const { colors } = useContext(ThemeContext);
    const { mediaRoom } = useContext(MediaRoomContext);
    const dispatch = useDispatch();
    const { sessionConfig } = useContext(ConfigServiceContext);
    const windowDimensions = useWindowDimensions();
    let { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const isOpen = roomViewType === DyteViewTypes.webinar
        && joinToStageState === RequestToJoinStageState.INITIATED;
    const acceptRequest = (selectedOption) => {
        dispatch(requestToJoinType(selectedOption));
        dispatch(requestedJoinToStageState(RequestToJoinStageState.WAITING));
        mediaRoom.requestToJoinStage(selectedOption);
        Alert.alert('Request Sent', `Request to ${selectedOption === RequestToJoinType.present ? 'present' : 'ask'} has been sent successfully to host`, [
            { text: "OK", onPress: () => { } }
        ]);
    };
    const rejectRequest = () => {
        dispatch(requestedJoinToStageState(RequestToJoinStageState.NONE));
        dispatch(requestToJoinType(undefined));
    };
    return (<Modal isVisible={isOpen} backdropOpacity={0.8} backdropColor={colors.secondary[800]}>

			<Flex width={width * 0.9} bg="secondary.1000" color="textPrimary.100" px={15} borderRadius={borderRadius.medium}>
				<Flex pt={15}>
                    <Text fontSize={28} fontWeight="bold">
						Request
                    </Text>
				</Flex>
				<Flex display="flex" pb={20}>
					<Flex direction={isMobile ? 'column' : 'row'} justifyContent="space-between">
						<Button onClick={() => acceptRequest(RequestToJoinType.present)}>
							<Box bg="primary.500" py={12} px={20} mt={20} borderRadius={borderRadius.small} align="center">
								<Text>Request to Present</Text>
							</Box>
						</Button>
						{sessionConfig.theme?.pip_mode && <Button onClick={() => acceptRequest(RequestToJoinType.ask)}>
							<Box bg="primary.500" py={12} px={20} mt={10} borderRadius={borderRadius.small} align="center">
								<Text>Request to Ask</Text>
							</Box>
						</Button>}
						<Button onClick={rejectRequest}>
							<Box bg="danger.500" py={12} px={20} mt={20} borderRadius={borderRadius.small} align="center">
								<Text>Cancel</Text>
							</Box>
						</Button>
					</Flex>
				</Flex>
			</Flex>
		</Modal>);
}
export default RequestToJoinStageModal;
//# sourceMappingURL=RequestToJoinStageModal.js.map