// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, IconButton, Persona, PersonaSize, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
import React from 'react';
import { useLocale } from '../localization';
import { _formatString } from "../../../acs-ui-common/src";
/**
 * A Notification component that is to be used to represent incoming calls to the end user.
 * Allows the user to accept or reject the incoming call.
 * @public
 */
export const IncomingCallNotification = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings, acceptOptions } = props;
    const theme = useTheme();
    const localeStrings = useLocale().strings.IncomingCallNotification;
    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {
        callerName: callerName
    }) : callerName;
    const acceptManuOptions = acceptOptions.showAcceptWithVideo ? {
        items: [{
                key: 'audio',
                text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
                onClick: () => onAcceptWithAudio()
            }, {
                key: 'video',
                text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
                onClick: () => onAcceptWithVideo()
            }]
    } : undefined;
    return React.createElement(Stack, { tokens: {
            childrenGap: '0.5rem'
        }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: {
                childrenGap: personaSize ? '0.5rem' : '0rem'
            } },
            React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
                React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: {
                    alignItems: 'flex-start',
                    fontFamily: 'Segoe UI'
                } },
                React.createElement(Text, { tabIndex: 0, "aria-live": 'assertive', "aria-label": alertText !== null && alertText !== void 0 ? alertText : formattedMessageString }, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c : formattedMessageString)),
            React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: {
                    iconName: 'cancel'
                }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: {
                childrenGap: '0.5rem'
            } },
            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: {
                    iconName: 'IncomingCallNotificationAcceptIcon',
                    style: {
                        lineHeight: '1rem'
                    }
                }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: {
                    iconName: 'IncomingCallNotificationRejectIcon'
                }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel)));
};
const incomingCallToastStyle = (theme) => {
    return {
        root: {
            width: '20rem',
            background: theme.palette.white,
            opacity: 0.95,
            borderRadius: '0.5rem',
            boxShadow: theme.effects.elevation8,
            padding: '1rem'
        }
    };
};
const incomingCallToastAvatarContainerStyle = {
    root: {
        marginRight: '0.5rem'
    }
};
const dismissButtonStyle = (theme) => {
    return {
        root: {
            color: theme.palette.neutralPrimary,
            width: '1rem',
            height: '1rem'
        },
        rootHovered: {
            color: theme.palette.neutralDark
        }
    };
};
const incomingCallAcceptButtonStyle = (theme) => {
    return {
        root: {
            color: theme.palette.white,
            border: 'none',
            borderRadius: theme.effects.roundedCorner4,
            width: '100%',
            maxWidth: '8.875rem'
        },
        rootHovered: {
            color: theme.palette.white
        },
        icon: {
            height: '1.25rem'
        }
    };
};
const incomingCallRejectButtonStyle = (theme) => {
    return {
        root: {
            borderRadius: theme.effects.roundedCorner4,
            maxWidth: '8.875rem',
            width: '100%'
        },
        icon: {
            height: '1.25rem'
        }
    };
};
//# sourceMappingURL=IncomingCallNotification.js.map