import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { Box, Button, Flex, HStack, Icon, Text, VStack, } from '../themes/components';
import { useWindowDimensions } from 'react-native';
import { MediaStates } from '../store/roomSlice';
import PeerView from '../components/video/PeerView';
import { UserTrackContext } from '../services/UserTrackProvider';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { permissionEnum, } from '../store/participantSlice';
import { useOrientation } from '../utils/browser-utils';
import borderRadius from "../themes/foundations/borderRadius";
export default function SelfPreview({ scroll = false, }) {
    const { sessionConfig } = useContext(ConfigServiceContext);
    const windowDimensions = useWindowDimensions();
    const { width } = sessionConfig.theme.dimensions || windowDimensions;
    const { orientation } = useOrientation();
    const isLandscape = orientation === "LANDSCAPE";
    let selfVideoWidth = Math.floor((width * 3) / 9);
    if (width < 1024 && width > 500) {
        selfVideoWidth = Math.floor((width * 4) / 9);
    }
    else if (width < 500) {
        selfVideoWidth = Math.floor((width * 7.2) / 9);
    }
    const selfVideoHeight = Math.floor((selfVideoWidth * (isLandscape ? 3 : 5)) / 4);
    const id = useSelector((state) => state.participant.id);
    const videoOff = useSelector((state) => state.participant.videoOff);
    const audioMuted = useSelector((state) => state.participant.audioMuted);
    const displayName = useSelector((state) => state.participant.displayName);
    const picture = useSelector((state) => state.participant.displayImageURL);
    const device = useSelector((state) => state.participant.device);
    const permissions = useSelector((state) => state.participant.participantPermissions);
    const videoProduction = useSelector((state) => state.participant.videoProduction);
    const audioProduction = useSelector((state) => state.participant.audioProduction);
    const { mediaTracks: { webcamTrack, audioTrack }, inputDevices: { audioInputDevices, videoInputDevices, onAudioInputChange, onVideoInputChange, toggleAudioState, toggleVideoState, }, } = useContext(UserTrackContext);
    const permissionDeniedMessage = (<Box status="error" bg="danger.500" p={12} borderRadius={borderRadius.small} mt={10} width={selfVideoWidth}>
			<HStack width={selfVideoWidth}>
				<VStack>
					<Text mb={2} fontSize="lg" fontWeight="bold">
						Permission Denied
					</Text>
					<Text fontSize="sm">
						We could not get permission to access your device.
					</Text>
				</VStack>
			</HStack>
		</Box>);
    const selfPeer = {
        id,
        device,
        displayName,
        audioMuted,
        picture,
        videoVisible: !videoOff,
        videoTrack: webcamTrack,
        audioTrack,
        isMe: true,
    };
    return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <Flex direction="column" justify="center">
			<PeerView height={selfVideoHeight} width={selfVideoWidth} peer={selfPeer}>
				<Flex direction="row" justify="flex-end" width={selfVideoWidth} mb={10}>
					<Button disabled={audioProduction === MediaStates.NOT_APPLICABLE
        || permissions.microphone === permissionEnum.DENIED} onClick={toggleAudioState}>
						<Box height={36} width={36} bg="secondary.800" borderRadius={borderRadius.small} align="center" mr={5} justify="center">
							{!audioMuted && audioTrack ? (<Icon name="mic" boxSize="20" fill="textPrimary.200"/>) : (<Icon name="mic-off" boxSize="20" fill="danger.500"/>)}
						</Box>
					</Button>
					<Button disabled={videoProduction === MediaStates.NOT_APPLICABLE
        || permissions.camera === permissionEnum.DENIED} onClick={toggleVideoState}>
						<Box height={36} width={36} bg="secondary.800" borderRadius={borderRadius.small} align="center" mr={20} justify="center">
							{!videoOff ? (<Icon name="videocam" boxSize="20" fill="textPrimary.200"/>) : (<Icon name="videocam-off" boxSize="20" fill="danger.500"/>)}
						</Box>
					</Button>
				</Flex>
			</PeerView>
			{(permissions.camera === permissionEnum.DENIED
        || permissions.microphone === permissionEnum.DENIED)
        && permissionDeniedMessage}
		</Flex>);
}
//# sourceMappingURL=SelfPreview.js.map