// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, Icon } from '@fluentui/react';
import { mergeStyles } from '@fluentui/react';
import React, { useCallback } from 'react';
import { useLocale } from '../localization';
import { useTheme } from '../theming';
import { darkTheme, lightTheme } from '../theming/themes';
import { isDarkThemed } from '../theming/themeUtils';
import { ControlBarButton } from './ControlBarButton';
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
const spacerClass = mergeStyles({
    width: 4
});
/**
 * A button to end an ongoing call.
 *
 * Can be used with {@link ControlBar}.
 *
 * @public
 */
export const EndCallButton = (props) => {
    var _a, _b;
    const { styles, enableEndCallMenu, onHangUp } = props;
    const localeStrings = useLocale().strings.endCallButton;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const isDarkTheme = isDarkThemed(theme);
    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
    const onRenderEndCallIcon = useCallback(() => React.createElement(React.Fragment, null,
        React.createElement(Icon, { iconName: "ControlButtonEndCall" }),
        enableEndCallMenu && React.createElement("span", { className: spacerClass })), [enableEndCallMenu]);
    const defaultMenuProps = {
        items: [{
                key: 'endForSelf',
                text: localeStrings.leaveOption,
                title: localeStrings.leaveOption,
                onClick: () => {
                    onHangUp && onHangUp(false);
                }
            }, {
                key: 'endForEveryone',
                text: localeStrings.endCallOption,
                title: localeStrings.endCallOption,
                onClick: () => {
                    onHangUp && onHangUp(true);
                }
            }],
        styles: props.styles,
        calloutProps: {
            styles: {
                root: {
                    maxWidth: '95%'
                }
            },
            preventDismissOnEvent
        }
    };
    return React.createElement(React.Fragment, null,
        React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' })));
};
const getButtonStyles = (theme) => {
    var _a;
    return ({
        regular: {
            color: theme.callingPalette.iconWhite,
            background: theme.callingPalette.callRed,
            '@media (forced-colors: active)': {
                forcedColorAdjust: 'auto',
                border: `1px ${(_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
            },
            ' i': {
                color: theme.callingPalette.iconWhite
            },
            ':focus::after': {
                outlineColor: `${theme.callingPalette.iconWhite} !important`
            } // added !important to avoid override by FluentUI button styles
        },
        pressed: {
            color: theme.callingPalette.iconWhite,
            background: theme.callingPalette.callRedDarker,
            border: 'none',
            ' i': {
                color: theme.callingPalette.iconWhite
            },
            '@media (forced-colors: active)': {
                forcedColorAdjust: 'auto'
            }
        },
        hovered: {
            color: theme.callingPalette.iconWhite,
            background: theme.callingPalette.callRedDark,
            border: 'none',
            ' i': {
                color: theme.callingPalette.iconWhite
            },
            '@media (forced-colors: active)': {
                forcedColorAdjust: 'auto'
            }
        }
    });
};
const darkThemeButtonStyles = getButtonStyles(darkTheme);
const lightThemeButtonStyles = getButtonStyles(lightTheme);
// using media query to prevent windows from overwriting the button color
const darkThemeCallButtonStyles = {
    root: darkThemeButtonStyles.regular,
    rootHovered: darkThemeButtonStyles.hovered,
    rootPressed: darkThemeButtonStyles.pressed,
    label: {
        color: darkTheme.callingPalette.iconWhite
    },
    splitButtonMenuButton: Object.assign(Object.assign({}, darkThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': darkThemeButtonStyles.hovered }),
    splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,
    splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed
};
const lightThemeCallButtonStyles = {
    root: lightThemeButtonStyles.regular,
    rootHovered: lightThemeButtonStyles.hovered,
    rootPressed: lightThemeButtonStyles.pressed,
    splitButtonMenuButton: Object.assign(Object.assign({}, lightThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': lightThemeButtonStyles.hovered }),
    splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,
    splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,
    splitButtonMenuFocused: lightThemeButtonStyles.pressed,
    label: {
        color: lightTheme.callingPalette.iconWhite
    }
};
const menupButtonPadding = {
    root: {
        padding: '0 0.75rem'
    }
};
//# sourceMappingURL=EndCallButton.js.map