/* eslint-disable no-underscore-dangle */
import React, { useContext, useEffect, useRef, useState, } from 'react';
import { useSelector } from 'react-redux';
import { Platform } from 'react-native';
import { useOrientation } from '../utils/browser-utils';
import borderRadius from '../themes/foundations/borderRadius';
import Clock from '../components/Clock';
/* import NotificationBar from '../components/NotificationBar';
 */ import { ConfigServiceContext } from '../utils/ConfigProvider';
import { WaitingState } from '../store/roomSlice';
import { Flex, Stack, Text, Box, VStack, Icon, HStack, } from '../themes/components';
import CameraSwitcher from '../components/video/CameraSwitcher';
const Divider = (props) => <Text mr={8} ml={8}>|</Text>;
const _StageHeader = ({ title, copyLink, linkCopied, width, height, noOfParticipants, }) => {
    const waitingState = useSelector((state) => state.room.waitingState);
    const { meeting, sessionConfig } = useContext(ConfigServiceContext);
    const plugins = useSelector((state) => state.plugin.main);
    const { orientation } = useOrientation();
    const mobileLandscape = orientation === 'LANDSCAPE';
    const recordingPeer = useSelector((state) => state.peers.recordingPeer);
    const [blink, setBlink] = useState(false);
    const blinkRef = useRef(null);
    const recordingRef = useRef(false);
    if (mobileLandscape || plugins.length > 0)
        return null;
    useEffect(() => {
        if (recordingPeer) {
            meeting?.emit(meeting.Events.recordingStarted);
            recordingRef.current = true;
            blinkRef.current = setInterval(() => {
                setBlink((e) => !e);
            }, 1000);
        }
        else if (recordingRef.current) {
            recordingRef.current = false;
            meeting?.emit(meeting.Events.recordingStopped);
            clearInterval(blinkRef.current);
        }
    }, [recordingPeer]);
    useEffect(() => () => {
        if (blinkRef.current) {
            clearInterval(blinkRef.current);
        }
    }, []);
    return (<Flex height={72} width={width} bg="secondary.1000" justify="center" align="center" pt={Platform.OS === 'android' ? 10 : 26}>
			<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 ? (<Text fontWeight="bold">
								{title}
							</Text>)
        : null}
					</Stack>

					<Stack isInline spacing={2} 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 ? (<Flex direction="row" align="center" mr={12}>
									<Text mr={4} color="textPrimary.400">
										{noOfParticipants + 1}
										{' '}
										participants
									</Text>
								</Flex>) : null}

					</Stack>
				</VStack>
				<HStack align="center" mr={16}>
					{recordingPeer && blink && (<Box mr={12}>
							<Icon name="fiber-manual-record" fill="danger.500"/>
						</Box>)}
					<CameraSwitcher />
				</HStack>
			</Flex>
		</Flex>);
};
export default React.memo(_StageHeader);
//# sourceMappingURL=StageHeader.js.map