// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, TooltipHost } from '@fluentui/react';
import { _formatString } from "../../../acs-ui-common/src";
import React, { useState } from 'react';
import { useLocale } from '../localization';
import { useTheme } from '../theming';
import { isDarkThemed } from '../theming/themeUtils';
import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
import { MessageStatusIcon } from './MessageStatusIcon';
/**
 * Component to display the status of a sent message.
 *
 * Adds an icon and tooltip corresponding to the message status.
 *
 * @internal
 */
export const MessageStatusIndicatorInternal = (props) => {
    const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount, shouldAnnounce } = props;
    const localeStrings = useLocale().strings.messageStatusIndicator;
    const [isTooltipToggled, setIsTooltipToggled] = useState(false);
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const calloutStyle = {
        root: {
            padding: 0
        },
        calloutMain: {
            padding: '0.5rem'
        }
    };
    // Place callout with no gap between it and the button.
    const calloutProps = {
        gapSpace: 0,
        styles: calloutStyle,
        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
    };
    switch (status) {
        case 'failed':
            return React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageFailed", iconClassName: mergeStyles(MessageStatusIndicatorErrorIconStyle, {
                        color: isDarkThemed(theme) ? theme.semanticColors.errorText : theme.palette.redDark
                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.failedToSendAriaLabel }));
        case 'sending':
            return React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSending", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, {
                        color: theme.palette.themePrimary
                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.sendingAriaLabel }));
        case 'seen':
            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
                // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
                // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back
                // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
                readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {
                    messageThreadReadCount: `${readCount}`,
                    remoteParticipantsCount: `${remoteParticipantsCount}`
                }), onTooltipToggle: () => {
                    if (onToggleToolTip) {
                        onToggleToolTip(!isTooltipToggled);
                        setIsTooltipToggled(!isTooltipToggled);
                    }
                } },
                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSeen", iconClassName: mergeStyles({
                        color: theme.palette.themePrimary
                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.seenAriaLabel }));
        case 'delivered':
            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageDelivered", iconClassName: mergeStyles(MessageStatusIndicatorIconStyle, {
                        color: theme.palette.themePrimary
                    }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.deliveredAriaLabel }));
        default:
            return React.createElement(React.Fragment, null);
    }
};
// The TooltipHost root uses display: inline by default.
// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
const hostStyles = {
    root: {
        display: 'inline-block'
    }
};
const MemoMessageStatusIcon = React.memo((obj) => {
    return React.createElement(MessageStatusIcon, Object.assign({}, obj));
});
//# sourceMappingURL=MessageStatusIndicatorInternal.js.map