// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { ErrorBar } from "../../../../../react-components/src";
import { useSelector } from '../hooks/useSelector';
import { lobbySelector } from '../selectors/lobbySelector';
import { CallArrangement } from '../components/CallArrangement';
import { usePropsFor } from '../hooks/usePropsFor';
import { LobbyTile } from '../components/LobbyTile';
import { getCallStatus, getRemoteParticipants } from '../selectors/baseSelectors';
import { disableCallControls, reduceCallControlsForMobile } from '../utils';
import { useLocale } from '../../localization';
import { CallCompositeIcon } from '../../common/icons';
import { isPhoneNumberIdentifier } from '@azure/communication-common';
/**
 * @private
 */
export const LobbyPage = (props) => {
    var _a, _b, _c, _d, _e, _f;
    const errorBarProps = usePropsFor(ErrorBar);
    const lobbyProps = useSelector(lobbySelector);
    const strings = useLocale().strings.call;
    const callState = useSelector(getCallStatus);
    const inLobby = callState === 'InLobby';
    const participants = (_a = useSelector(getRemoteParticipants)) !== null && _a !== void 0 ? _a : {};
    // Reduce the controls shown when mobile view is enabled.
    let callControlOptions = props.mobileView ? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls) : (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
    callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
    return React.createElement(CallArrangement, { complianceBannerProps: {
            strings
        }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, showErrorNotifications: (_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== null && _f !== void 0 ? _f : true, callControlProps: {
            options: callControlOptions,
            increaseFlyoutItemSize: props.mobileView
        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React.createElement(LobbyTile, Object.assign({}, lobbyProps, { showLocalVideoCameraCycleButton: props.mobileView, overlayProps: overlayProps(strings, inLobby, Object.values(participants)) })), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError, latestNotifications: props.latestNotifications, onDismissNotification: props.onDismissNotification });
};
const overlayProps = (strings, inLobby, remoteParticipants) => {
    /**
     * Only grab the first participant because there will only be one in this situation.
     * when starting a call with multiple people the call goes to the connected state and composite goes directly to
     * videoGallery.
     *
     * We also need to check the participant state since in a group call the remote participants array will populate just before
     * the user joins. In this situation we also check the participant states. in a groupCall the state of the participants
     * will be 'Idle'.
     */
    const outboundCallParticipant = remoteParticipants[0] && ['Ringing', 'Connecting'].includes(remoteParticipants[0].state) && remoteParticipants.length === 1 ? remoteParticipants[0] : undefined;
    return inLobby ? overlayPropsWaitingToBeAdmitted(strings) : outboundCallParticipant ? overlayPropsOutboundCall(strings, outboundCallParticipant) : overlayPropsConnectingToCall(strings);
};
const overlayPropsConnectingToCall = (strings) => ({
    title: strings.lobbyScreenConnectingToCallTitle,
    moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,
    overlayIcon: React.createElement(CallCompositeIcon, { iconName: "LobbyScreenConnectingToCall" })
});
const overlayPropsWaitingToBeAdmitted = (strings) => ({
    title: strings.lobbyScreenWaitingToBeAdmittedTitle,
    moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,
    overlayIcon: React.createElement(CallCompositeIcon, { iconName: "LobbyScreenWaitingToBeAdmitted" })
});
const overlayPropsOutboundCall = (strings, participant) => {
    var _a;
    if (isPhoneNumberIdentifier(participant.identifier)) {
        return {
            title: participant.identifier.phoneNumber,
            moreDetails: strings.outboundCallingNoticeString
        };
    }
    else {
        return {
            title: (_a = strings.outboundCallingNoticeString) !== null && _a !== void 0 ? _a : ''
        };
    }
};
//# sourceMappingURL=LobbyPage.js.map