// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useLocale } from '../localization';
import { ControlBarButton } from './ControlBarButton';
import { DefaultPalette, mergeStyleSets, useTheme } from '@fluentui/react';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
/**
 * A button to start / stop screen sharing.
 *
 * Can be used with {@link ControlBar}.
 *
 * @public
 */
export const ScreenShareButton = (props) => {
    var _a, _b, _c, _d;
    const localeStrings = useLocale().strings.screenShareButton;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const styles = screenshareButtonStyles(theme);
    const onRenderScreenShareOnIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" });
    const onRenderScreenShareOffIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" });
    return React.createElement(ControlBarButton, Object.assign({}, props, { styles: mergeStyleSets(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled }));
};
const screenshareButtonStyles = (theme) => ({
    rootChecked: {
        background: theme.semanticColors.primaryButtonBackground,
        color: theme.semanticColors.primaryButtonText,
        ':focus::after': {
            outlineColor: `${DefaultPalette.white} !important`
        },
        // added !important to avoid override by FluentUI button styles
        '@media (forced-colors: active)': {
            border: '1px solid',
            borderColor: theme.palette.black
        }
    },
    rootCheckedHovered: {
        background: theme.semanticColors.primaryButtonBackgroundHovered,
        color: theme.semanticColors.primaryButtonTextHovered,
        ':focus::after': {
            outlineColor: `${DefaultPalette.white} !important`
        },
        // added !important to avoid override by FluentUI button styles
        '@media (forced-colors: active)': {
            border: '1px solid',
            borderColor: theme.palette.black
        }
    },
    rootCheckedPressed: {
        background: theme.semanticColors.primaryButtonBackgroundPressed,
        color: theme.semanticColors.primaryButtonTextPressed
    },
    labelChecked: {
        color: theme.semanticColors.primaryButtonText
    }
});
//# sourceMappingURL=ScreenShareButton.js.map