// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useRef, useState } from 'react';
import { Stack } from '@fluentui/react';
import { useLocale } from '../localization';
import { NotificationIconProps, dismissNotification, dropDismissalsForInactiveNotifications, notificationsToShow } from './utils';
import { Notification } from './Notification';
/**
 * A component to show notifications on the UI.
 * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.
 * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.
 *
 * This component internally tracks dismissed by the user.
 *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.
 *   * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.
 *         If the notification recurs, it is shown in the UI.
 *
 *
 * @public
 */
export const NotificationStack = (props) => {
    var _a, _b;
    const localeStrings = useLocale().strings.notificationStack;
    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
    const maxNotificationsToShow = (_b = props.maxNotificationsToShow) !== null && _b !== void 0 ? _b : 2;
    const trackDismissedNotificationsInternally = !props.onDismissNotification;
    // Timestamp for when this comopnent is first mounted.
    // Never updated through the lifecycle of this component.
    const mountTimestamp = useRef(new Date(Date.now()));
    const [dismissedNotifications, setDismissedNotifications] = useState([]);
    // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.
    // Without this behaviour, this `useEffect` block would cause a render loop.
    useEffect(() => {
        trackDismissedNotificationsInternally && setDismissedNotifications(dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications));
    }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);
    const activeNotifications = notificationsToShow(props.activeNotifications, dismissedNotifications, props.ignorePremountNotifications ? mountTimestamp.current : undefined);
    return React.createElement(Stack, { "data-ui-id": "notifications-stack", style: {
            width: 'fit-content'
        } }, activeNotifications.map((notification, index) => {
        if (index < maxNotificationsToShow) {
            const onDismiss = () => {
                var _a;
                trackDismissedNotificationsInternally ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification)) : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
                notification.onDismiss && notification.onDismiss();
            };
            if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {
                // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to
                // onDismiss if it is not defined
                notification.onClickSecondaryButton = notification.onClickSecondaryButton ? notification.onClickSecondaryButton : () => onDismiss();
            }
            return React.createElement("div", { key: index, style: {
                    marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}`
                } },
                React.createElement(Notification, { notificationStrings: strings ? strings[notification.type] : undefined, notificationIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: onDismiss, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss, ariaLive: notification.ariaLive }));
        }
        else {
            return React.createElement(React.Fragment, null);
        }
    }));
};
//# sourceMappingURL=NotificationStack.js.map