import React, { useContext } from 'react';
import { Flex, Modal, Stack, Text, Icon, Button, Box, } from '../themes/components';
import { MediaRoomContext } from '../services/MediaRoomService';
import { useDispatch } from 'react-redux';
import { removeWaitListPeer } from '../store/roomSlice';
import { ThemeContext } from 'styled-components';
import UserAvatar from 'react-native-user-avatar';
function HostWaitingListModal({ isOpen, peers }) {
    const { mediaRoom } = useContext(MediaRoomContext);
    const dispatch = useDispatch();
    const acceptRequest = (peerId) => {
        dispatch(removeWaitListPeer({ id: peerId }));
        mediaRoom.acceptWaitingRequest(peerId);
    };
    const { colors } = useContext(ThemeContext);
    const rejectRequest = (peerId) => {
        dispatch(removeWaitListPeer({ id: peerId }));
        mediaRoom.rejectWaitingRequest(peerId);
    };
    return (<Modal isVisible={isOpen} backdropOpacity={0.8} backdropColor={colors.secondary[800]}>
			<Text fontWeight="bold">Waiting Requests</Text>
			<Stack spacing={6} height="80">
				{peers.map((peer) => (<Flex direction="row" alignItems="center">
						<UserAvatar name={peer.name} bgColor={colors.primary[700]}/>
						<Flex marginLeft={3} flexGrow={1} alignItems="center" paddingY={2} borderBottom={`1px solid ${colors.secondary[800]}`}>
							<Text color={colors.textPrimary[200]} fontSize="lg">
								{peer.name}
							</Text>
							<Flex marginLeft="auto">
								<Button _hover={{ borderColor: colors.danger[500] }} onClick={() => rejectRequest(peer.id)}>
									<Box bg="secondary.700" p={4}>
										<Icon boxSize="16" name="close"/>
									</Box>
								</Button>
								<Button _hover={{ borderColor: colors.danger[500] }} onClick={() => rejectRequest(peer.id)}>
									<Box bg="primary.500" p={4}>
										<Icon boxSize="16" name="check"/>
									</Box>
								</Button>
							</Flex>
						</Flex>
					</Flex>))}
			</Stack>
		</Modal>);
}
export default HostWaitingListModal;
//# sourceMappingURL=HostWaitlistManagerModal.js.map