/* eslint-disable no-param-reassign */
import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { useWindowDimensions } from 'react-native';
import { Box, Flex, } from '../../themes/components';
import PeerView from '../../components/video/PeerView';
import PluginWrapper from '../../services/PluginWrapper';
import { ConfigServiceContext } from '../../utils/ConfigProvider';
import { PeersServiceContext } from '../../services/PeersService';
import { useOrientation } from '../../utils/browser-utils';
const getSizesMobile = (width, totalPeers) => {
    let rows = 1;
    if (totalPeers === 1)
        totalPeers = 2;
    if (totalPeers > 3) {
        rows = 2;
        totalPeers = 3;
    }
    const peerSize = Math.floor(width / totalPeers);
    return [rows * peerSize, peerSize - 4];
};
const SingleSpeakerGridLayout = (props) => {
    const { widthOffset, sharingScreen, peers: inputPeers } = props;
    const { sessionConfig } = useContext(ConfigServiceContext);
    const { screenSharePeer } = useContext(PeersServiceContext);
    const windowDimensions = useWindowDimensions();
    let { width, height } = sessionConfig.theme.dimensions || windowDimensions;
    // const activeSpeakerPeerId = useSelector((state: RootState) => state.room.activeSpeakerPeerId);
    const isMobile = width < 1024;
    const { orientation } = useOrientation();
    const mobileLandscape = orientation === "LANDSCAPE";
    let heightOffset = 0;
    // Fixed height header and control bars 40px Header + 64px Control bar
    if (sessionConfig.theme.header.is_enabled) {
        heightOffset -= 72;
    }
    if (sessionConfig.theme.control_bar.is_enabled) {
        heightOffset -= 54;
    }
    if (mobileLandscape) {
        width += heightOffset + 56;
    }
    else {
        height += heightOffset;
        width -= widthOffset;
    }
    const activeVideoHeightDesktop = height - 32;
    // Constant width of peer videos
    const peerVideoWidthDesktop = 250;
    const remainingWidthDesktop = width - peerVideoWidthDesktop - 16;
    const [mainViewHeightOffset, videoSizeMobile] = getSizesMobile(width, inputPeers.length);
    const plugins = useSelector((state) => state.plugin);
    /**
     * Input peers is reordered to include the pinned/screensharing peer at the start
     */
    const peers = [];
    let screenSharingPeer;
    let pinnedPeer;
    let activeSpeakerPeer;
    inputPeers.forEach((peer) => {
        /*
        if (peer.id === activeSpeakerPeerId) {
            activeSpeakerPeer = peer;
        } */
        if (peer.isScreensharing) {
            screenSharingPeer = peer;
            peers.unshift(peer);
        }
        else if (peer.isPinned) {
            pinnedPeer = peer;
            peers.unshift(peer);
        }
        else {
            peers.push(peer);
        }
    });
    const activePeer = screenSharePeer
        || pinnedPeer
        || activeSpeakerPeer
        || peers[peers.length - 1];
    let mainViewComponent;
    if (plugins.main.length > 0) {
        const frame = plugins.main[0];
        mainViewComponent = (<PluginWrapper height={height} width={width} frame={frame}/>);
    }
    else if (mobileLandscape) {
        mainViewComponent = (<PeerView height={height - 16} width={width - 32} contain={activePeer.screenshare
            || sessionConfig.theme.grid.single.videoFit === 'contain'} peer={activePeer} totalPeers={peers.length} isMobile/>);
    }
    else if (isMobile) {
        mainViewComponent = (<PeerView contain={activePeer.screenshare
            || sessionConfig.theme.grid.single.videoFit === 'contain'} height={height - mainViewHeightOffset - 16} width={width - 16} totalPeers={peers.length} peer={activePeer} isMobile/>);
    }
    else {
        mainViewComponent = (<PeerView totalPeers={peers.length} contain={activePeer.screenshare
            || sessionConfig.theme.grid.single.videoFit === 'contain'} height={activeVideoHeightDesktop} width={remainingWidthDesktop - 64} peer={activePeer}/>);
    }
    const transform = `rotate(${mobileLandscape ? 90 : 0}deg)`;
    const transformOrigin = `${Math.floor(height / 2)}px ${Math.floor(height / 2)}px`;
    const renderHiddenPeers = () => peers.map((peer) => {
        const newPeer = { ...peer };
        newPeer.videoVisible = false;
        newPeer.videoTrack = null;
        return (<Box key={`${peer.id}_video`} position="absolute" zIndex={-5} top={100} width={2} height={2} left={100} visibility="hidden">
				<PeerView width={1} height={1} peer={newPeer} totalPeers={peers.length}/>
			</Box>);
    });
    if (isMobile) {
        if (plugins.main.length > 0 && !mobileLandscape) {
            return (<Flex height={height - 2} width={width} flexDirection="column" backgroundColor="secondary.1000">
					<Box alignItems="center" justifyContent="center" mt={10}>
						{mainViewComponent}
					</Box>
				</Flex>);
        }
        return (<Flex height={height} width={width} flexDirection={mobileLandscape ? "row" : "column"} marginLeft={mobileLandscape ? 56 : 0} paddingLeft={mobileLandscape ? 20 : 0} backgroundColor="secondary.1000">
				<Box alignItems="center" justifyContent="center" mt={mobileLandscape ? 0 : 8} ml={mobileLandscape ? -8 : 0}>
					{mainViewComponent}
				</Box>
				{!mobileLandscape && (<Flex mt={5} className="dyte-client-noScrollbar" justify="center" flexWrap="wrap" direction="row">
						{peers.map((peer) => {
            if (!activePeer.screenshare
                && plugins.main.length === 0
                && peer.id === activePeer.id)
                return null;
            return (<PeerView width={videoSizeMobile} height={videoSizeMobile} peer={peer} isMobile totalPeers={peers.length} key={`${peer.id}_video`}/>);
        })}
					</Flex>)}
				{mobileLandscape ? renderHiddenPeers() : null}
			</Flex>);
    }
    return null;
};
export default SingleSpeakerGridLayout;
//# sourceMappingURL=SingleSpeakerGridLayout.js.map