// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useRef, useState } from 'react';
import { MessageBar, Stack } from '@fluentui/react';
import { useLocale } from '../localization';
import { dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';
/**
 * A component to show error messages on the UI.
 * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
 * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
 *
 * This component internally tracks dismissed by the user.
 *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
 *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
 *         If the error recurs, it is shown in the UI.
 *
 * Uses {@link @fluentui/react#MessageBar} UI element.
 *
 * @public
 */
export const ErrorBar = (props) => {
    var _a;
    const localeStrings = useLocale().strings.errorBar;
    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
    const trackDismissedErrorsInternally = !props.onDismissError;
    // Timestamp for when this comopnent is first mounted.
    // Never updated through the lifecycle of this component.
    const mountTimestamp = useRef(new Date(Date.now()));
    const [dismissedErrors, setDismissedErrors] = useState([]);
    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
    // Without this behaviour, this `useEffect` block would cause a render loop.
    useEffect(() => {
        trackDismissedErrorsInternally && setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));
    }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);
    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors, props.ignorePremountErrors ? mountTimestamp.current : undefined);
    return React.createElement(Stack, { "data-ui-id": "notifications-stack" }, toShow.map(error => React.createElement(MessageBar, Object.assign({}, props, { styles: {
            innerText: {
                alignSelf: 'center'
            },
            icon: {
                height: 0
            },
            content: {
                lineHeight: 'inherit'
            },
            dismissal: {
                height: '2rem',
                paddingBottom: '0.8rem'
            }
        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => { var _a; return trackDismissedErrorsInternally ? setDismissedErrors(dismissError(dismissedErrors, error)) : (_a = props.onDismissError) === null || _a === void 0 ? void 0 : _a.call(props, error); }, dismissButtonAriaLabel: `${strings[error.type]}, ${strings.dismissButtonAriaLabel}`, dismissIconProps: {
            iconName: 'ErrorBarClear'
        } }), strings[error.type])));
};
//# sourceMappingURL=ErrorBar.js.map