// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useState } from 'react';
import { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, DefaultButton, Link } from '@fluentui/react';
import { cancelIcon } from './styles/ImageOverlay.style';
import { containerStyles, hiddenContainerStyles, messageTextStyles, notificationIconStyles, notificationLinkStyles, titleTextStyles } from './styles/Notification.styles';
/**
 * A component to show notification messages on the UI.
 *
 * @public
 */
export const Notification = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
    const strings = props.notificationStrings;
    const theme = useTheme();
    const [show, setShow] = useState(true);
    const { ariaLive = 'assertive', role = 'alert' } = props;
    if (props.autoDismiss) {
        setTimeout(() => {
            // After 5 seconds set the show value to false
            setShow(false);
        }, 5000);
        if (!show) {
            props.onDismiss && props.onDismiss();
            return React.createElement(React.Fragment, null);
        }
    }
    return React.createElement(Stack, { horizontalAlign: "center", "aria-live": ariaLive, role: role },
        React.createElement(Stack, { "data-ui-id": "notification-bar", styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : containerStyles(theme) },
            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                React.createElement(Stack, { horizontal: true },
                    React.createElement(Icon, Object.assign({ styles: (_d = (_c = props.styles) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : notificationIconStyles(), iconName: (_f = (_e = props.notificationIconProps) === null || _e === void 0 ? void 0 : _e.iconName) !== null && _f !== void 0 ? _f : 'ErrorBadge' }, props.notificationIconProps)),
                    React.createElement(Text, { styles: (_h = (_g = props.styles) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : titleTextStyles() }, strings === null || strings === void 0 ? void 0 : strings.title)),
                props.onDismiss && React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
            React.createElement("span", null,
                React.createElement(Text, { styles: (_k = (_j = props.styles) === null || _j === void 0 ? void 0 : _j.content) !== null && _k !== void 0 ? _k : messageTextStyles(theme) },
                    " ", strings === null || strings === void 0 ? void 0 :
                    strings.message),
                props.onClickLink && (strings === null || strings === void 0 ? void 0 : strings.linkLabel) && React.createElement(Link, { styles: (_m = (_l = props.styles) === null || _l === void 0 ? void 0 : _l.link) !== null && _m !== void 0 ? _m : notificationLinkStyles(theme), onClick: props.onClickLink }, strings === null || strings === void 0 ? void 0 : strings.linkLabel)),
            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
                (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, styles: (_p = (_o = props.styles) === null || _o === void 0 ? void 0 : _o.secondaryButton) !== null && _p !== void 0 ? _p : {
                        root: {
                            marginTop: '1rem'
                        }
                    } }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel),
                (strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel) && React.createElement(PrimaryButton, { onClick: props.onClickPrimaryButton, styles: (_r = (_q = props.styles) === null || _q === void 0 ? void 0 : _q.primaryButton) !== null && _r !== void 0 ? _r : {
                        root: {
                            marginTop: '1rem'
                        }
                    } }, strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel))),
        props.showStackedEffect && React.createElement(Stack, { className: hiddenContainerStyles(theme) }));
};
//# sourceMappingURL=Notification.js.map