import React, { useContext, useEffect } from 'react';
import { Dimensions, NativeModules } from 'react-native';
import { Flex, Button, Text, Modal, } from '../themes/components';
import { MediaRoomContext } from '../services/MediaRoomService';
import { useSelector, useDispatch } from 'react-redux';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { setScreenShareRequested, resetRoom } from '../store/roomSlice';
import { resetPeers } from '../store/peersSlice';
import { resetParticipant } from '../store/participantSlice';
import { ThemeContext } from 'styled-components';
import borderRadius from '../themes/foundations/borderRadius';
const { DyteHelper } = NativeModules;
export default (props) => {
    const screenWidth = Dimensions.get('screen').width;
    const modalWidth = screenWidth * 0.9;
    const modalButtonsWidth = modalWidth / 2 - 20;
    const { isOpen, onClose } = props;
    const kicked = useSelector((state) => state.room.kicked);
    const sharingScreen = useSelector((state) => state.participant.sharingScreen);
    const { mediaRoom } = useContext(MediaRoomContext);
    const { meeting, sessionConfig } = useContext(ConfigServiceContext);
    const { colors } = useContext(ThemeContext);
    const dispatch = useDispatch();
    const leaveRoom = () => {
        setTimeout(() => {
            DyteHelper.stopService();
            if (sharingScreen) {
                dispatch(setScreenShareRequested(false));
                mediaRoom.disableScreenShare();
            }
        });
        meeting.emit(meeting.Events.disconnect);
        meeting.emit(meeting.Events.meetingEnded, { kicked });
        mediaRoom?.stopAllProducers();
        dispatch(resetPeers());
        dispatch(resetParticipant());
        dispatch(resetRoom({}));
        onClose();
    };
    useEffect(() => {
        if (meeting) {
            meeting.leaveRoom = leaveRoom;
        }
    }, [meeting]);
    useEffect(() => {
        if (kicked) {
            leaveRoom();
        }
    }, [kicked]);
    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={() => leaveRoom()}>
							<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