/* eslint-disable no-underscore-dangle */
import React, { useContext, useEffect, useRef, useState, } from 'react';
import { useSelector } from 'react-redux';
import { Platform } from 'react-native';
import { OrientationContext } from '../services/OrientationContext';
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, Button, } from '../themes/components';
import CameraSwitcher from '../components/video/CameraSwitcher';
import { DyteViewTypes } from '../utils/dyte-utils/src';
import { PresentingState } from '../store/participantSlice';
import { PeersServiceContext } from '../services/PeersService';
import NotificationCircle from '../components/notificationCircle';
import { DrawerContext } from '../services/DrawerService';
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 } = React.useContext(OrientationContext);
    const mobileLandscape = orientation === 'LANDSCAPE';
    const recordingPeer = useSelector((state) => state.peers.recordingPeer);
    const [blink, setBlink] = useState(false);
    const blinkRef = useRef(null);
    const recordingRef = useRef(false);
    const roomViewType = useSelector((state) => state.room.roomViewType);
    const presentingState = useSelector((state) => state.participant.presentingState);
    const videoOff = useSelector((state) => state.participant.videoOff);
    const peersService = useContext(PeersServiceContext);
    const { processedPeers } = peersService;
    const { selfPeer, joinedProcessedPeers } = peersService;
    const { setDrawerExpander, setopenedTab, } = React.useContext(DrawerContext);
    useEffect(() => {
        if (recordingPeer && !recordingRef.current) {
            meeting?.emit(meeting.Events.recordingStarted);
            recordingRef.current = true;
            blinkRef.current = setInterval(() => {
                setBlink((e) => !e);
            }, 1000);
        }
        else if (!recordingPeer && recordingRef.current) {
            recordingRef.current = false;
            meeting?.emit(meeting.Events.recordingStopped);
            clearInterval(blinkRef.current);
        }
    }, [recordingPeer]);
    useEffect(() => () => {
        if (blinkRef.current) {
            clearInterval(blinkRef.current);
        }
    }, []);
    if (mobileLandscape || plugins.length > 0)
        return null;
    const openParticipantTab = () => {
        setDrawerExpander(true);
        setopenedTab('participants');
    };
    return (<Flex height={56} 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 align="center" width={width / 2}>

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

					<Stack isInline spacing={2} pt={2} align="center">

						{sessionConfig.theme.header.elements.timer && waitingState !== WaitingState.WAITING && (<Clock />)}
						{recordingPeer && blink && (<Box ml={12} bg="danger.500" pl={4} pr={6} borderRadius={4} direction="row" alignItems="center">
								<Icon boxSize="15" name="fiber-manual-record" fill="white"/>
								<Text color="white">REC</Text>
							</Box>)}

						
						

					</Stack>
				</VStack>
				<HStack align="flex-end" mb={2}>
					{sessionConfig.theme.control_bar.elements.participants
        && (<Box mr={28}>
							<Box position="absolute" top={-12} zIndex={25} right={joinedProcessedPeers.length + 1 > 99 ? -18 : -10}>
								<NotificationCircle number={joinedProcessedPeers.length + 1} color="primary.500"/>
							</Box>
							<Button onClick={openParticipantTab}>
								<Icon boxSize="24" name="people" fill="textPrimary.100"/>
							</Button>
						</Box>)}
					{!videoOff && (roomViewType !== DyteViewTypes.webinar
        || presentingState === PresentingState.PRESENTING) && <CameraSwitcher />}
				</HStack>
			</Flex>
		</Flex>);
};
export default React.memo(_StageHeader);
//# sourceMappingURL=StageHeader.js.map