// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, Stack } from '@fluentui/react';
import { _isInLobbyOrConnecting } from "../../../../../calling-component-bindings/src";
import { _DrawerMenu, _useContainerHeight, _useContainerWidth, useTheme } from "../../../../../react-components/src";
import { NotificationStack } from "../../../../../react-components/src";
import { VideoGallery } from "../../../../../react-components/src";
import React, { useMemo, useRef, useState } from 'react';
import { useEffect } from 'react';
import { useCallback } from 'react';
import { CallingCaptionsBanner } from '../../common/CallingCaptionsBanner';
import { containerDivStyles } from '../../common/ContainerRectProps';
import { compositeMinWidthRem } from '../../common/styles/Composite.styles';
import { useAdapter } from '../adapter/CallAdapterProvider';
import { CallControls } from '../components/CallControls';
import { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';
import { callArrangementContainerStyles, notificationsContainerStyles, containerStyleDesktop, containerStyleMobile, mediaGalleryContainerStyles, galleryParentContainerStyles, bannerNotificationStyles, CONTROL_BAR_Z_INDEX, DRAWER_Z_INDEX } from '../styles/CallPage.styles';
import { notificationStackStyles } from '../styles/CallPage.styles';
import { useSelector } from '../hooks/useSelector';
import { callStatusSelector } from '../selectors/callStatusSelector';
import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
import { getCapabilites, getIsTeamsMeeting, getReactionResources, getRemoteParticipants, getRole, getVideoEffectsDependency } from '../selectors/baseSelectors';
import { getPage } from '../selectors/baseSelectors';
import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
import { drawerContainerStyles } from '../styles/CallComposite.styles';
import { SidePane } from './SidePane/SidePane';
import { usePeoplePane } from './SidePane/usePeoplePane';
import { useMeetingPhoneInfoPane } from './SidePane/useMeetingPhoneInfo';
import { getTeamsMeetingCoordinates } from '../selectors/baseSelectors';
import { useVideoEffectsPane, VIDEO_EFFECTS_SIDE_PANE_ID, VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM } from './SidePane/useVideoEffectsPane';
import { isDisabled } from '../utils';
import { useIsSidePaneOpen } from './SidePane/SidePaneProvider';
import { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';
import { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';
import { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';
import { useMinMaxDragPosition } from '../../common/utils';
import { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';
import { CapabilitiesChangedNotificationBar } from './CapabilitiesChangedNotificationBar';
import { useLocale } from '../../localization';
import { usePropsFor } from '../hooks/usePropsFor';
import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt, useStopAllSpotlightCallbackWithPrompt } from '../utils/spotlightUtils';
import { getIsTeamsCall, getMediaAccessSetting } from '../selectors/baseSelectors';
import { useHandlers } from '../hooks/useHandlers';
import { MoreDrawer } from '../../common/Drawer/MoreDrawer';
import { useCompositeStringsForNotificationStackStrings } from '../hooks/useCompositeStringsForNotificationStack';
import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
/**
 * @private
 * Maximum number of remote video tiles that can be pinned
 */
export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
/**
 * @private
 */
export const CallArrangement = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
    const containerClassName = useMemo(() => {
        return props.mobileView ? containerStyleMobile : containerStyleDesktop;
    }, [props.mobileView]);
    const theme = useTheme();
    const callGalleryStyles = useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);
    const peopleButtonRef = useRef(null);
    const cameraButtonRef = useRef(null);
    const sidePaneDismissButtonRef = useRef(null);
    const containerRef = useRef(null);
    const containerWidth = _useContainerWidth(containerRef);
    const containerHeight = _useContainerHeight(containerRef);
    const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);
    const { updateSidePaneRenderer } = props;
    const isInLocalHold = useSelector(getPage) === 'hold';
    const capabilities = useSelector(getCapabilites);
    const adapter = useAdapter();
    const [participantActioned, setParticipantActioned] = useState();
    const remoteParticipants = useSelector(getRemoteParticipants);
    const [drawerMenuItems, setDrawerMenuItems] = useState([]);
    useEffect(() => {
        const participantIsActionedButIsNotPresent = participantActioned && (remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants[participantActioned]) === undefined;
        if (participantIsActionedButIsNotPresent) {
            setDrawerMenuItems([]);
        }
    }, [participantActioned, remoteParticipants]);
    const conferencePhoneInfo = useSelector(getTeamsMeetingCoordinates);
    const meetingPhoneInfoPaneProps = {
        updateSidePaneRenderer,
        mobileView: props.mobileView,
        conferencePhoneInfo: conferencePhoneInfo
    };
    const peoplePaneProps = useMemo(() => {
        var _a;
        return ({
            updateSidePaneRenderer,
            setDrawerMenuItems,
            inviteLink: props.callControlProps.callInvitationURL,
            onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,
            onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
            mobileView: props.mobileView,
            peopleButtonRef,
            setParticipantActioned,
            sidePaneDismissButtonRef,
            chatButtonPresent: !!props.onCloseChatPane
        });
    }, [updateSidePaneRenderer, props.callControlProps.callInvitationURL, (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, props.onFetchAvatarPersonaData, props.mobileView, peopleButtonRef, setParticipantActioned, sidePaneDismissButtonRef, props.onCloseChatPane]);
    const locale = useLocale();
    const role = useSelector(getRole);
    const videoGalleryProps = usePropsFor(VideoGallery);
    const muteAllHandlers = useHandlers(MoreDrawer);
    const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = videoGalleryProps;
    const [showTeamsMeetingConferenceModal, setShowTeamsMeetingConferenceModal] = useState(false);
    const toggleTeamsMeetingConferenceModal = useCallback(() => {
        setShowTeamsMeetingConferenceModal(!showTeamsMeetingConferenceModal);
    }, [showTeamsMeetingConferenceModal]);
    const { isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane, closeMeetingPhoneInfoPane } = useMeetingPhoneInfoPane(Object.assign({}, meetingPhoneInfoPaneProps));
    const toggleMeetingPhoneInfoPane = useCallback(() => {
        if (isMeetingPhoneInfoPaneOpen) {
            closeMeetingPhoneInfoPane();
        }
        else {
            openMeetingPhoneInfoPane();
        }
    }, [closeMeetingPhoneInfoPane, isMeetingPhoneInfoPaneOpen, openMeetingPhoneInfoPane]);
    const onMeetingPhoneInfoClicked = useCallback(() => {
        setShowDrawer(false);
        toggleMeetingPhoneInfoPane();
    }, [toggleMeetingPhoneInfoPane]);
    const { pinnedParticipants, setPinnedParticipants } = props;
    const onPinParticipant = useCallback((userId) => {
        if (pinnedParticipants && pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
            return;
        }
        if (pinnedParticipants && setPinnedParticipants && !pinnedParticipants.includes(userId)) {
            setPinnedParticipants(pinnedParticipants.concat(userId));
        }
    }, [pinnedParticipants, setPinnedParticipants]);
    const onUnpinParticipant = useCallback((userId) => {
        if (pinnedParticipants && setPinnedParticipants) {
            setPinnedParticipants(pinnedParticipants.filter(participantId => participantId !== userId));
        }
    }, [setPinnedParticipants, pinnedParticipants]);
    const pinPeoplePaneProps = useMemo(() => {
        return {
            pinnedParticipants: pinnedParticipants,
            onPinParticipant: onPinParticipant,
            onUnpinParticipant: onUnpinParticipant,
            disablePinMenuItem: pinnedParticipants && pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES
        };
    }, [onPinParticipant, onUnpinParticipant, pinnedParticipants]);
    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
    const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
    const stopAllSpotlight = useMemo(() => canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined, [canRemoveSpotlight, adapter]);
    const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
    const onMuteParticipantPeoplePaneProps = useMemo(() => {
        var _a, _b;
        return {
            onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
            onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown' ? muteAllHandlers.onMuteAllRemoteParticipants : undefined
        };
    }, [onMuteParticipant, role, capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers, muteAllHandlers.onMuteAllRemoteParticipants]);
    const spotlightPeoplePaneProps = useMemo(() => {
        return {
            spotlightedParticipantUserIds: spotlightedParticipants,
            onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt,
            onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt,
            onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt,
            onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt,
            onStopAllSpotlight: hideSpotlightButtons ? undefined : stopAllSpotlightWithPrompt,
            maxParticipantsToSpotlight
        };
    }, [hideSpotlightButtons, maxParticipantsToSpotlight, onStartLocalSpotlightWithPrompt, onStartRemoteSpotlightWithPrompt, onStopLocalSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt, stopAllSpotlightWithPrompt, spotlightedParticipants]);
    const meetingMediaAccess = useSelector(getMediaAccessSetting);
    const canForbidOthersAudio = !!((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersAudio) === null || _b === void 0 ? void 0 : _b.isPresent);
    const canForbidOthersVideo = !!((_c = capabilities === null || capabilities === void 0 ? void 0 : capabilities.forbidOthersVideo) === null || _c === void 0 ? void 0 : _c.isPresent);
    const onToggleParticipantMicPeoplePaneProps = useMemo(() => {
        return {
            onForbidAudio: canForbidOthersAudio ? onForbidAudio : undefined,
            onPermitAudio: canForbidOthersAudio ? onPermitAudio : undefined,
            onForbidOthersAudio: canForbidOthersAudio ? muteAllHandlers.onForbidOthersAudio : undefined,
            onPermitOthersAudio: canForbidOthersAudio ? muteAllHandlers.onPermitOthersAudio : undefined,
            onForbidVideo: canForbidOthersVideo ? onForbidVideo : undefined,
            onPermitVideo: canForbidOthersVideo ? onPermitVideo : undefined,
            onForbidOthersVideo: canForbidOthersVideo ? muteAllHandlers.onForbidOthersVideo : undefined,
            onPermitOthersVideo: canForbidOthersVideo ? muteAllHandlers.onPermitOthersVideo : undefined,
            meetingMediaAccess
        };
    }, [canForbidOthersAudio, onForbidAudio, onPermitAudio, muteAllHandlers.onForbidOthersAudio, muteAllHandlers.onPermitOthersAudio, muteAllHandlers.onForbidOthersVideo, muteAllHandlers.onPermitOthersVideo, canForbidOthersVideo, onForbidVideo, onPermitVideo, meetingMediaAccess]);
    const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps), onToggleParticipantMicPeoplePaneProps));
    const togglePeoplePane = useCallback(() => {
        if (isPeoplePaneOpen) {
            closePeoplePane();
        }
        else {
            openPeoplePane();
        }
    }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);
    useEffect(() => {
        if (isInLocalHold) {
            // close side pane on local hold
            updateSidePaneRenderer(undefined);
        }
    }, [updateSidePaneRenderer, isInLocalHold, isPeoplePaneOpen, closePeoplePane]);
    const isSidePaneOpen = useIsSidePaneOpen();
    const [renderGallery, setRenderGallery] = useState(!isSidePaneOpen && props.mobileView);
    useEffect(() => {
        if (isSidePaneOpen && props.mobileView) {
            setRenderGallery(false);
        }
        else {
            setRenderGallery(true);
        }
    }, [props.mobileView, isSidePaneOpen]);
    const modalStrings = {
        dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel
    };
    const isMobileWithActivePane = props.mobileView && isSidePaneOpen;
    const callCompositeContainerCSS = useMemo(() => {
        return {
            display: isMobileWithActivePane ? 'none' : 'flex',
            minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,
            width: '100%',
            height: '100%',
            position: 'relative'
        };
    }, [isMobileWithActivePane, props.mobileView]);
    const onResolveVideoEffectDependency = useSelector(getVideoEffectsDependency);
    const { openVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
    const [showDrawer, setShowDrawer] = useState(false);
    const onMoreButtonClicked = useCallback(() => {
        setShowDrawer(true);
    }, []);
    const closeDrawer = useCallback(() => {
        setShowDrawer(false);
    }, []);
    const onMoreDrawerPeopleClicked = useCallback(() => {
        setShowDrawer(false);
        togglePeoplePane();
    }, [togglePeoplePane]);
    const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
    let filteredLatestErrorNotifications = props.showErrorNotifications ? props.latestErrors : [];
    const isCameraOn = useSelector(localVideoSelector).isAvailable;
    // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
    if (role === 'Consumer' && (props.errorBarProps || props.showErrorNotifications)) {
        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
    }
    if (props.doNotShowCameraAccessNotifications) {
        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
    }
    const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
    if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
        filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter(e => e.type !== 'unableToStartVideoEffect');
    }
    const isTeamsMeeting = useSelector(getIsTeamsMeeting);
    const isTeamsCall = useSelector(getIsTeamsCall);
    // Teams captions are only available in Teams meetings or Teams calls.
    // For Teams Meetings, we need to check if the capability is present.
    const useTeamsCaptions = isTeamsMeeting && ((_d = capabilities === null || capabilities === void 0 ? void 0 : capabilities.setCaptionLanguage) === null || _d === void 0 ? void 0 : _d.isPresent) || isTeamsCall;
    const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
    const isCaptionsOn = useSelector(getCaptionsStatus);
    const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
    const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
    const galleryContainerStyles = useMemo(() => {
        var _a;
        return Object.assign(Object.assign({}, mediaGalleryContainerStyles), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? {
            root: {
                postion: 'absolute'
            }
        } : {}));
    }, [(_e = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _e === void 0 ? void 0 : _e.height]);
    if (isTeamsMeeting) {
        filteredLatestErrorNotifications.filter(notification => notification.type === 'teamsMeetingCallNetworkQualityLow').forEach(notification => {
            notification.onClickPrimaryButton = props.mobileView ? toggleMeetingPhoneInfoPane : toggleTeamsMeetingConferenceModal;
        });
    }
    const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
    // Filter out shareScreen capability notifications if on mobile
    const filteredCapabilitesChangedNotifications = props.mobileView ? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications.filter(notification => notification.capabilityName !== 'shareScreen') : (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === void 0 ? void 0 : _g.capabilitiesChangedNotifications;
    const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
    let latestNotifications = props.latestNotifications;
    // Filter out breakout room notification that prompts user to join breakout room when in mobile view. We will
    // replace it with a non-dismissible banner
    latestNotifications = props.mobileView ? (latestNotifications !== null && latestNotifications !== void 0 ? latestNotifications : []).filter(notification => notification.type !== 'assignedBreakoutRoomOpenedPromptJoin') : latestNotifications;
    const reactionResources = useSelector(getReactionResources);
    const [openRealTimeText, setOpenRealTimeText] = useState(false);
    const onStartRealTimeText = useCallback(() => {
        setOpenRealTimeText(true);
    }, []);
    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles), id: props.id },
        React.createElement(Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
            React.createElement(Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
                React.createElement(Stack, { horizontal: true, grow: true },
                    React.createElement(Stack.Item, { style: callCompositeContainerCSS },
                        React.createElement(Stack.Item, { styles: callGalleryStyles, grow: true },
                            React.createElement(Stack, { verticalFill: true, styles: galleryContainerStyles },
                                !((_h = props.notificationOptions) === null || _h === void 0 ? void 0 : _h.hideAllNotifications) && React.createElement(Stack.Item, { styles: notificationsContainerStyles },
                                    props.mobileView && React.createElement(BreakoutRoomsBanner, { locale: locale, adapter: adapter }),
                                    props.showErrorNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
                                        React.createElement(NotificationStack, { onDismissNotification: props.onDismissError, activeNotifications: filteredLatestErrorNotifications })),
                                    latestNotifications && React.createElement(Stack, { styles: notificationStackStyles, horizontalAlign: "center", verticalAlign: "center" },
                                        React.createElement(NotificationStack, { activeNotifications: latestNotifications, onDismissNotification: props.onDismissNotification, strings: notificationStackStrings })),
                                    props.capabilitiesChangedNotificationBarProps && props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && React.createElement(Stack, { styles: bannerNotificationStyles },
                                        React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
                                renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
                                !isInLocalHold && React.createElement(CallingCaptionsBanner, { captionsOptions: props.captionsOptions, isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions, isRealTimeTextOn: openRealTimeText })))),
                    React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options) ? undefined : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' && isDisabled((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
                    props.mobileView && React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                            closePeoplePane();
                            if (props.onCloseChatPane) {
                                props.onCloseChatPane();
                            }
                        } }),
                    drawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles() },
                        React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))),
                ((_m = props.callControlProps) === null || _m === void 0 ? void 0 : _m.options) !== false && !isMobileWithActivePane && React.createElement(Stack, { verticalAlign: 'center', className: mergeStyles({
                        zIndex: CONTROL_BAR_Z_INDEX,
                        padding: verticalControlBar ? '0.25rem' : 'unset'
                    }) }, isLegacyCallControlEnabled((_o = props.callControlProps) === null || _o === void 0 ? void 0 : _o.options) ? React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar })) : React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, isRealTimeTextSupported: hasJoinedCall && props.isRTTSupportedCall, onStartRealTimeText: onStartRealTimeText, startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal, sidePaneDismissButtonRef: sidePaneDismissButtonRef }))),
                ((_p = props.callControlProps) === null || _p === void 0 ? void 0 : _p.options) !== false && showDrawer && React.createElement(Stack, { styles: drawerContainerStylesValue },
                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: useTeamsCaptions && hasJoinedCall || hasJoinedCall, isRealTimeTextSupported: hasJoinedCall && props.isRTTSupportedCall, onStartRealTimeText: onStartRealTimeText, startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, dtmfDialerOptions: props.dtmfDialerOptions, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked })))));
};
const isLegacyCallControlEnabled = (options) => {
    return !!options && options !== true && (options === null || options === void 0 ? void 0 : options.legacyControlBarExperience) === true;
};
const shouldShowPeopleTabHeaderButton = (callControls) => {
    if (callControls === undefined || callControls === true) {
        return true;
    }
    if (callControls === false) {
        return false;
    }
    return callControls.participantsButton !== false && callControls.peopleButton !== false;
};
//# sourceMappingURL=CallArrangement.js.map