import React, { useContext } from 'react';
import { Dimensions, NativeModules } from 'react-native';
import { Flex, Button, Text, Modal, } from '../themes/components';
import { MediaRoomContext } from '../services/MediaRoomService';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { ThemeContext } from 'styled-components';
import borderRadius from '../themes/foundations/borderRadius';
const { DyteHelper } = NativeModules;
export default ({ isOpen, onClose, }) => {
    const screenWidth = Dimensions.get('screen').width;
    const modalWidth = screenWidth * 0.9;
    const modalButtonsWidth = modalWidth / 2 - 20;
    const { mediaRoom } = useContext(MediaRoomContext);
    const { sessionConfig } = useContext(ConfigServiceContext);
    const { colors } = useContext(ThemeContext);
    const leaveRoomAndEndMeeting = async () => {
        await mediaRoom.kickAll();
    };
    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">Leave</Text>
				</Flex>
				<Flex>
					<Text fontSize="lg">Are you sure you want to leave the call?</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={onClose}>
							<Flex borderRadius={borderRadius.small} bg="danger.500" height={40} width={modalButtonsWidth - 4} alignItems="center" justifyContent="center">
								<Text fontSize="lg">Leave</Text>
							</Flex>
						</Button>
					</Flex>
					<Flex>
						{sessionConfig.permissions.kick_participant && (<Button onClick={leaveRoomAndEndMeeting}>
								<Flex display="flex" direction="row" mt={15} justify="space-around">
									<Flex bg="danger.500" height={40} width={modalButtonsWidth * 2} alignItems="center" justifyContent="center">
										<Text fontSize="lg">End Meeting</Text>
									</Flex>
								</Flex>
							</Button>)}
					</Flex>
				</Flex>
			</Flex>
		</Modal>);
};
//# sourceMappingURL=ConfirmExitModal.js.map