// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Icon, Stack, Text } from '@fluentui/react';
import React, { useEffect } from 'react';
import { useLocale } from '../../localization';
import { useTheme } from '../../theming';
import { VideoTile } from '../VideoTile';
import { StreamMedia } from '../StreamMedia';
import { LoadingSpinner } from './RemoteScreenShare';
import { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';
/**
 * A memoized version of local screen share component. 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 LocalScreenShare = React.memo((props) => {
    const { localParticipant, renderElement, isAvailable, onCreateLocalStreamView, onDisposeLocalScreenShareStreamView, localScreenShareView = 'stream' } = props;
    const locale = useLocale();
    const theme = useTheme();
    if (!renderElement && localScreenShareView === 'stream') {
        onCreateLocalStreamView && onCreateLocalStreamView();
    }
    useEffect(() => {
        return () => {
            // TODO: Isolate disposing behaviors for screenShare and videoStream
            onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();
        };
    }, [onDisposeLocalScreenShareStreamView]);
    if (!localParticipant || !localParticipant.isScreenSharingOn) {
        return null;
    }
    const localScreenSharingPlaceholder = React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: {
                childrenGap: '1rem'
            } },
            React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
                React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage)));
    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName) ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
    const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
    if (localScreenShareView === 'placeholderMessage') {
        return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingPlaceholder);
    }
    return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess });
});
//# sourceMappingURL=LocalScreenShare.js.map