// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { _LocalVideoTile, _RemoteVideoTile, _PictureInPictureInPicture } from "../../../../../react-components/src";
import { useLocale } from '../../localization';
/**
 * @private
 */
export const LocalAndRemotePIP = (props) => {
    var _a, _b;
    const { localParticipant, remoteParticipant, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
    const localVideoTileProps = useMemo(() => {
        var _a, _b;
        return ({
            onCreateLocalStreamView,
            onDisposeLocalStreamView,
            localVideoViewOptions,
            displayName: localParticipant.displayName,
            showLabel: false,
            showMuteIndicator: false,
            showCameraSwitcherInLocalPreview: false,
            isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
            renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
            raisedHand: localParticipant.raisedHand
        });
    }, [localParticipant.displayName, (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);
    const remoteVideoTileProps = useMemo(() => {
        var _a, _b, _c;
        return !remoteParticipant ? undefined : {
            remoteParticipant: remoteParticipant,
            onCreateRemoteStreamView,
            onDisposeRemoteStreamView,
            remoteVideoViewOptions,
            displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
            showLabel: false,
            showMuteIndicator: false,
            isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
            isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
            renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
            userId: remoteParticipant.userId,
            key: remoteParticipant.userId
        };
    }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
    const locale = useLocale();
    const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
    const strings = useMemo(() => ({
        rootAriaLabel: ariaLabel
    }), [ariaLabel]);
    // If there are no remote participants, show the local participant as the primary tile
    const primaryTileProps = useMemo(() => ({
        children: remoteVideoTileProps ? React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => {
                /* Add to disable scaling */
            } })) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
        orientation: 'portrait'
    }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
    // If we are showing the local participant as the primary tile, show nothing for the secondary tile
    const secondaryTileProps = useMemo(() => remoteVideoTileProps ? {
        children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
        orientation: 'portrait'
    } : undefined, [localVideoTileProps, remoteVideoTileProps]);
    return React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps });
};
const localVideoViewOptions = {
    scalingMode: 'Crop',
    isMirrored: true
};
const remoteVideoViewOptions = {
    scalingMode: 'Crop',
    isMirrored: false
};
//# sourceMappingURL=LocalAndRemotePIP.js.map