/* eslint-disable no-underscore-dangle */
import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import Clock from '../components/Clock';
import { Platform } from 'react-native';
/* import NotificationBar from '../components/NotificationBar';
 */ import { ConfigServiceContext } from '../utils/ConfigProvider';
import { WaitingState } from '../store/roomSlice';
import { Flex, Stack, Text, VStack, } from '../themes/components';
import { useOrientation, withAnchorPoint } from '../utils/browser-utils';
import CameraSwitcher from './video/CameraSwitcher';
import borderRadius from '../themes/foundations/borderRadius';
const Divider = (props) => <Text mr={8} ml={8}>|</Text>;
const _StageHeader = ({ isMobile = true, title, copyLink, linkCopied, width, height, noOfParticipants, }) => {
    const waitingState = useSelector((state) => state.room.waitingState);
    const { sessionConfig } = useContext(ConfigServiceContext);
    const { orientation } = useOrientation();
    const mobileLandscape = orientation === "LANDSCAPE";
    const getTransform = () => {
        let x = { transform: [{ rotate: '-90deg' }] };
        return withAnchorPoint(x, { x: 1, y: 0 }, { width: width, height: 72 });
    };
    const mobileLandscapeProps = mobileLandscape && { zIndex: 10, position: "absolute", top: 0, left: -height / 2 + 2, ...getTransform() };
    return (<Flex height={72} width={width} bg="secondary.1000" justify="center" align="center" pt={Platform.OS === 'android' ? 10 : 26} {...mobileLandscapeProps}>
			<Flex borderRadius={borderRadius.medium} width={width - 8} justify="space-between" direction="row" px={12}>
				<VStack>
			<Stack p={2} align="center" width={width / 2}>

				{sessionConfig.theme.header.elements.title && isMobile ? (<Text fontWeight="bold">
						{title}
					</Text>)
        : null}
			</Stack>

			<Stack isInline spacing={isMobile ? 2 : 6} p={2} align="center">

				{sessionConfig.theme.header.elements.timer && waitingState !== WaitingState.WAITING && (<Clock />)}
				{sessionConfig.theme.header.elements.participant_count && (<Text mr={4} color="textPrimary.400">  • </Text>)}
				{sessionConfig.theme.header.elements.participant_count && isMobile ? (<Flex direction="row" align="center" mr={12}>
							<Text mr={4} color="textPrimary.400">
								{noOfParticipants + 1} participants
							</Text>
						</Flex>) : null}

			</Stack>
			</VStack>
				<VStack justify="center" mr={12}>
					<CameraSwitcher />
				</VStack>
			</Flex>
		</Flex>);
};
export default React.memo(_StageHeader);
//# sourceMappingURL=StageHeader.js.map