// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect } from 'react';
import { mergeStyles, Stack } from '@fluentui/react';
import { StreamMedia, VideoTile } from "../../../../../react-components/src";
import { containerStyles, overlayBackgroundStyles, overlayContentStyles, videoTileStyles } from '../styles/ExpandedLocalVideoTile.styles';
const onRenderEmptyPlaceholder = () => React.createElement(React.Fragment, null);
const localVideoViewOptions = {
    scalingMode: 'Crop',
    isMirrored: true
};
/**
 * @private
 */
export const ExpandedLocalVideoTile = (props) => {
    var _a;
    const videoStream = props.localParticipantVideoStream;
    const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
    const renderElement = videoStream === null || videoStream === void 0 ? void 0 : videoStream.renderElement;
    useEffect(() => {
        if (videoStream && isVideoReady) {
            props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));
        }
    }, [isVideoReady, videoStream, props, renderElement]);
    return React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
        React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && React.createElement(React.Fragment, null,
            React.createElement(Stack, { className: mergeStyles(overlayBackgroundStyles(isVideoReady)) }),
            React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))));
};
//# sourceMappingURL=ExpandedLocalVideoTile.js.map