// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useMemo, memo, useState } from 'react';
import { StreamMedia } from '../StreamMedia';
import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
import { Stack } from '@fluentui/react';
import { togetherModeStreamRootStyle } from '../styles/TogetherMode.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 TogetherModeStream = memo((props) => {
    var _a, _b, _c, _d;
    const { startTogetherModeEnabled, isTogetherModeActive, onCreateTogetherModeStreamView, onStartTogetherMode, onSetTogetherModeSceneSize, onDisposeTogetherModeStreamView, togetherModeStreams, containerWidth, containerHeight } = props;
    const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);
    useEffect(() => {
        return () => {
            // TODO: Isolate disposing behaviors for screenShare and videoStream
            onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();
        };
    }, [onDisposeTogetherModeStreamView]);
    // Trigger startTogetherMode only when needed
    useEffect(() => {
        if (startTogetherModeEnabled && !isTogetherModeActive) {
            onStartTogetherMode === null || onStartTogetherMode === void 0 ? void 0 : onStartTogetherMode();
        }
    }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);
    // Create stream view if not already created
    useEffect(() => {
        var _a, _b;
        if (((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && !((_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.renderElement)) {
            onCreateTogetherModeStreamView === null || onCreateTogetherModeStreamView === void 0 ? void 0 : onCreateTogetherModeStreamView();
        }
    }, [(_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.renderElement, (_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.isAvailable, onCreateTogetherModeStreamView]);
    // Re-render the component if mainVideoStream isReceiving changes
    useEffect(() => {
        var _a;
        setShowLoadingIndicator(!((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.isReceiving));
        // This effect will trigger a re-render when isReceiving changes
    }, [(_c = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _c === void 0 ? void 0 : _c.isReceiving]);
    // Update scene size only when container dimensions change
    useMemo(() => {
        if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {
            onSetTogetherModeSceneSize(containerWidth, containerHeight);
        }
    }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);
    const stream = (_d = props.togetherModeStreams) === null || _d === void 0 ? void 0 : _d.mainVideoStream;
    return containerWidth && containerHeight ? React.createElement(Stack, { styles: togetherModeStreamRootStyle, horizontalAlign: "center", verticalAlign: "center", "data-ui-id": "together-mode-layout" },
        React.createElement(StreamMedia, { videoStreamElement: (stream === null || stream === void 0 ? void 0 : stream.renderElement) || null, isMirrored: true, loadingState: showLoadingIndicator ? 'loading' : 'none' }),
        React.createElement(MeetingReactionOverlay, { reactionResources: props.reactionResources || {}, localParticipant: props.localParticipant, remoteParticipants: props.remoteParticipants, togetherModeSeatPositions: props.seatingCoordinates, overlayMode: "together-mode" })) : React.createElement(React.Fragment, null);
});
//# sourceMappingURL=TogetherModeStream.js.map