// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useLocale } from '../localization';
import { ControlBarButton } from './ControlBarButton';
import { concatStyleSets, DefaultPalette, useTheme } from '@fluentui/react';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
/**
 * A button to start / stop screen sharing.
 *
 * Can be used with {@link ControlBar}.
 *
 * @public
 */
export const RaiseHandButton = (props) => {
    var _a, _b, _c, _d;
    const localeStrings = useLocale().strings.raiseHandButton;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const styles = raiseHandButtonStyles(theme);
    const onRenderRaiseHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" });
    const onRenderLowerHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" });
    return React.createElement(ControlBarButton, Object.assign({}, props, { styles: concatStyleSets(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', "aria-label": props.checked ? strings.onLabel : strings.offLabel, "aria-description": props.checked ? strings.tooltipOnContent : strings.tooltipOffContent, disabled: props.disabled }));
};
const raiseHandButtonStyles = (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=RaiseHandButton.js.map