import React, { useContext, } from 'react';
import { MediaRoomContext } from '../services/MediaRoomService';
import { useDispatch, useSelector } from 'react-redux';
import { PresentingState, RequestToJoinType, stoppedPresenting, } from '../store/participantSlice';
import { DyteViewTypes, WebinarAcceptRequestType } from '../types/newTypes';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { Box, Button, Flex, HStack, Modal, Text, VStack, } from '../themes/components';
import { ThemeContext } from 'styled-components';
import { useWindowDimensions } from 'react-native';
import borderRadius from '../themes/foundations/borderRadius';
import SelfPreview from '../components/SelfPreview';
import { OrientationContext } from '../services/OrientationContext';
function StartPresentingModal() {
    const roomViewType = useSelector((state) => state.room.roomViewType);
    const presentingState = useSelector((state) => state.participant.presentingState);
    const { mediaRoom } = useContext(MediaRoomContext);
    const { sessionConfig } = useContext(ConfigServiceContext);
    const requestToJoinTypeValue = useSelector((state) => state.participant.requestToJoinType);
    const { orientation } = React.useContext(OrientationContext);
    const mobileLandscape = orientation === 'LANDSCAPE';
    const dispatch = useDispatch();
    const windowDimensions = useWindowDimensions();
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const { colors } = useContext(ThemeContext);
    const isOpen = roomViewType === DyteViewTypes.webinar
        && presentingState === PresentingState.INITIATED;
    const acceptRequest = () => {
        mediaRoom.startPresenting();
    };
    const rejectRequest = () => {
        if (sessionConfig.permissions?.accept_present_requests) {
            dispatch(stoppedPresenting());
        }
        else {
            mediaRoom.removePeerFromStage(mediaRoom.peerid, WebinarAcceptRequestType.REQUESTED_BY_PARTICIPANT);
        }
    };
    const isModerator = sessionConfig.permissions?.accept_present_requests;
    const confirmText = () => (RequestToJoinType.present ? 'Start Presenting' : 'Start Asking');
    const renderLandscape = () => (<HStack>
			<Flex width="50%">
				<SelfPreview />
			</Flex>
			<Flex width="50%" px={25} direction="column" justify="center">
				<Button width="100%" onClick={rejectRequest}>
					<Box bg="danger.500" py={15} px={20} borderRadius={borderRadius.small} align="center">
						<Text>Cancel</Text>
					</Box>
				</Button>
				<Button width="100%" onClick={acceptRequest}>
					<Box bg="primary.500" py={15} px={20} mt={20} borderRadius={borderRadius.small} align="center">
						<Text>{confirmText()}</Text>
					</Box>
				</Button>
			</Flex>
		</HStack>);
    const renderPotrait = () => (<VStack>
			<SelfPreview />
			<Flex direction="column" justifyContent="space-between">
				<Button width="100%" onClick={rejectRequest}>
					<Box bg="danger.500" py={12} px={20} mt={10} borderRadius={borderRadius.small} align="center">
						<Text>Cancel</Text>
					</Box>
				</Button>
				<Button width="100%" onClick={acceptRequest}>
					<Box bg="primary.500" py={12} px={20} mt={10} borderRadius={borderRadius.small} align="center">
						<Text>{confirmText()}</Text>
					</Box>
				</Button>
			</Flex>
		</VStack>);
    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 py={25}>
					<Flex display="flex" py={20}>
						{mobileLandscape ? renderLandscape() : renderPotrait()}
					</Flex>
				</Flex>
			</Flex>
		</Modal>);
}
export default StartPresentingModal;
//# sourceMappingURL=StartPresentingModal.js.map