import React, { useContext } from 'react';
import { NativeModules, useWindowDimensions, } from 'react-native';
import { Flex, Button, Text, Modal, } from '../../themes/components';
import { ConfigServiceContext } from '../../utils/ConfigProvider';
import { ThemeContext } from 'styled-components';
import borderRadius from '../../themes/foundations/borderRadius';
import { useDispatch, useSelector } from 'react-redux';
import { MediaRoomContext } from '../../services/MediaRoomService';
import { stoppedPresenting, RequestToJoinStageState, } from '../../store/participantSlice';
import { WebinarAcceptRequestType } from '../../types/newTypes';
const { DyteHelper } = NativeModules;
export default ({ isOpen, onClose, }) => {
    const { sessionConfig } = useContext(ConfigServiceContext);
    const windowDimensions = useWindowDimensions();
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const modalWidth = width * 0.9;
    const modalButtonsWidth = modalWidth / 2 - 20;
    const { colors } = useContext(ThemeContext);
    const dispatch = useDispatch();
    const { mediaRoom } = useContext(MediaRoomContext);
    const joinToStageState = useSelector((state) => state.participant.requestToJoinStageState);
    const onDropClicked = () => {
        if (joinToStageState === RequestToJoinStageState.ACCEPTED) {
            onClose();
            mediaRoom.removePeerFromStage(mediaRoom.peerid, WebinarAcceptRequestType.REQUESTED_BY_PARTICIPANT);
        }
        else {
            mediaRoom.stopPresenting();
            dispatch(stoppedPresenting());
            onClose();
        }
    };
    return (<Modal isVisible={isOpen} backdropOpacity={0.8} backdropColor={colors.secondary[800]}>
			<Flex width={modalWidth} bg="secondary.1000" color="textPrimary.100" px={15} borderRadius={borderRadius.large}>
				<Flex py={25}>
					<Text fontSize={28} fontWeight="bold">Drop</Text>
				</Flex>
				<Flex>
					<Text fontSize="lg">Do you want to stop presenting?</Text>
				</Flex>

				<Flex display="flex" py={20}>
					<Flex display="flex" direction="row" pt={15} justify="space-around">
						<Button onClick={onClose}>
							<Flex borderRadius={borderRadius.small} bg="secondary.700" height={40} width={modalButtonsWidth - 4} alignItems="center" justifyContent="center">
								<Text fontSize="lg">Cancel</Text>
							</Flex>
						</Button>
						<Button onClick={onDropClicked}>
							<Flex borderRadius={borderRadius.small} bg="danger.500" height={40} width={modalButtonsWidth - 4} alignItems="center" justifyContent="center">
								<Text fontSize="lg">Drop</Text>
							</Flex>
						</Button>
					</Flex>
				</Flex>
			</Flex>
		</Modal>);
};
//# sourceMappingURL=DropFromStage.js.map