// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Spinner, SpinnerSize, Stack } from '@fluentui/react';
import React, { useEffect } from 'react';
import { useLocale } from '../../localization';
import { StreamMedia } from '../StreamMedia';
import { VideoTile } from '../VideoTile';
import { loadingLabelStyles, loadingStyle } from './styles/RemoteScreenShare.styles';
import { _formatString } from "../../../../acs-ui-common/src";
import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
/**
 * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
 * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
 * https://reactjs.org/docs/react-api.html#reactmemo
 */
export const RemoteScreenShare = React.memo((props) => {
    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, reactionResources, localParticipant, remoteParticipants } = props;
    const locale = useLocale();
    if (!renderElement) {
        /**
         * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we
         * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling
         * mode is the same as before we started the screen share.
         *
         * We should deprecate the current function and replace it with a
         * createRemoteScreenShareStreamView and createRemoteVideoStreamView.
         */
        onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);
    }
    useEffect(() => {
        return () => {
            // TODO: Isolate disposing behaviors for screenShare and videoStream
            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
        };
    }, [onDisposeRemoteStreamView, userId]);
    const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
        participant: displayName
    }) : '';
    return React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), overlay: reactionResources && React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) });
});
/**
 * LoadingSpinner component for displaying a loading spinner.
 *
 * @param {string} props.loadingMessage - The loading message to display.
 * @returns {JSX.Element} The JSX element representing the loading spinner.
 */
export const LoadingSpinner = (props) => {
    return React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
        React.createElement(Spinner, { styles: loadingLabelStyles, label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' }));
};
//# sourceMappingURL=RemoteScreenShare.js.map