// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { mergeStyles, Stack, Text } from '@fluentui/react';
import { LocalVideoCameraCycleButton, useTheme } from "../../../../../react-components/src";
import { localCameraSwitcherContainerStyles, moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';
import { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';
import { useHandlers } from '../hooks/useHandlers';
import { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';
import { useSelector } from '../hooks/useSelector';
/**
 * @private
 */
export const LobbyTile = (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 cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
    const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
    const palette = useTheme().palette;
    const handlers = useHandlers(ExpandedLocalVideoTile);
    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
            props.showLocalVideoCameraCycleButton && isVideoReady && React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' }))),
            React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
            React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle", role: "alert" }, props.overlayProps.title),
            props.overlayProps.moreDetails && React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)) : undefined }, handlers));
};
//# sourceMappingURL=LobbyTile.js.map