// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { mergeStyles, Stack, Text } from '@fluentui/react';
import { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from "../../../../../react-components/src";
import React, { useCallback } from 'react';
import { CallCompositeIcon } from '../../common/icons';
import { useLocale } from '../../localization';
import { useAdapter } from '../adapter/CallAdapterProvider';
import { usePropsFor } from '../hooks/usePropsFor';
import { useSelector } from '../hooks/useSelector';
import { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';
import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
import { localPreviewSelector } from '../selectors/localPreviewSelector';
import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
import { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';
/**
 * @private
 */
export const LocalPreview = (props) => {
    var _a;
    const locale = useLocale();
    const cameraButtonProps = usePropsFor(CameraButton);
    const localPreviewProps = useSelector(localPreviewSelector);
    const devicesButtonProps = usePropsFor(DevicesButton);
    const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);
    const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);
    const adapter = useAdapter();
    const onToggleMic = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
    }), [adapter, isLocalMicrophoneEnabled]);
    const hasNoSpeakers = !devicesButtonProps.speakers.length;
    const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;
    const hasCameras = devicesButtonProps.cameras.length > 0;
    const hasMicrophones = devicesButtonProps.microphones.length > 0;
    const cameraLoadingString = (_a = locale.strings.call.configurationPageCameraIsLoadingLabel) !== null && _a !== void 0 ? _a : locale.strings.call.cameraTurnedOff;
    const previewCameraString = props.cameraLoading ? cameraLoadingString : locale.strings.call.cameraTurnedOff;
    const theme = useTheme();
    const onRenderPlaceholder = useCallback(() => {
        return React.createElement(Stack, { className: mergeStyles({
                width: '100%',
                height: '100%',
                // The text should be centered in the local preview with the camera icon
                // appearing above the text. To compensate for the camera icon's height,
                // we add a negative margin to the top of the container.
                marginTop: '-0.8rem'
            }), verticalAlign: "center" },
            React.createElement(Stack.Item, { align: "center" },
                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, {
                        color: theme.palette.neutralTertiary
                    }) })),
            React.createElement(Stack.Item, { align: "center" },
                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, {
                        color: theme.palette.neutralSecondary
                    }) }, previewCameraString)));
    }, [theme, previewCameraString]);
    const devicesButtonStyles = props.mobileView ? {
        menuStyles: {
            menuItemStyles: buttonFlyoutIncreasedSizeStyles
        }
    } : undefined;
    return React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme) },
        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement }) : undefined, onRenderPlaceholder: onRenderPlaceholder },
            React.createElement(ControlBar, { layout: "floatingBottom" },
                React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true, 
                    // disable tooltip as it obscures list of devices on mobile
                    strings: props.mobileView ? {
                        tooltipOnContent: '',
                        tooltipOffContent: '',
                        tooltipDisabledContent: ''
                    } : {}, styles: localPreviewButtonStyle(props.mobileView) }),
                React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { onToggleCamera: props.onToggleCamera, showLabel: true, disabled: !cameraPermissionGranted || !hasCameras || props.cameraLoading, 
                    // disable tooltip as it obscures list of devices on mobile
                    strings: props.mobileView ? {
                        tooltipOnContent: '',
                        tooltipOffContent: '',
                        tooltipDisabledContent: '',
                        tooltipVideoLoadingContent: ''
                    } : {}, styles: localPreviewButtonStyle(props.mobileView) })),
                props.showDevicesButton && React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
                    // disable button whilst all other buttons are disabled
                    disabled: !microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers || hasNoDevices, showLabel: true, 
                    // disable tooltip as it obscures list of devices on mobile
                    strings: props.mobileView ? {
                        tooltipContent: ''
                    } : {}, styles: devicesButtonStyles })))));
};
//# sourceMappingURL=LocalPreview.js.map