// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useState } from 'react';
import { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';
import { useLocale } from '../localization';
import { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';
import { dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';
import { messageBarLinkStyles } from './styles/MessageBarLink.styles';
/**
 * @internal
 * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide
 */
export const _TroubleshootingGuideErrorBar = (props) => {
    var _a;
    const theme = useTheme();
    // error bar strings
    const localeStrings = useLocale().strings.errorBar;
    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
    const [dismissedErrors, setDismissedErrors] = useState([]);
    const { onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick, permissionsState = {
        camera: 'denied',
        microphone: 'denied'
    }, troubleshootingGuideStrings } = props;
    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
    // Without this behaviour, this `useEffect` block would cause a render loop.
    useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
    return React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map((error, i) => {
        const devicePermissionErrorBar = React.createElement("div", null,
            strings[error.type],
            ' ',
            onPermissionsTroubleshootingClick && React.createElement(Link, { onClick: () => {
                    onPermissionsTroubleshootingClick(permissionsState);
                } },
                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.devicePermissionLinkText)));
        const networkErrorBar = React.createElement("div", null,
            strings[error.type],
            ' ',
            onNetworkingTroubleshootingClick && React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
                React.createElement("span", { className: messageBarLinkStyles(theme, true) }, troubleshootingGuideStrings.networkTroubleshootingLinkText)));
        return React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: `${error.type} ${i}`, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
                    setDismissedErrors(dismissError(dismissedErrors, error));
                }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false, "aria-role": "alert", "aria-live": "assertive" }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar));
    }));
};
const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
    if (errorType === 'callNetworkQualityLow') {
        return networkErrorBar;
    }
    else {
        return devicePermissionErrorBar;
    }
};
//# sourceMappingURL=TroubleshootingGuideErrorBar.js.map