import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import { useStyleConfig, vui } from '../core';
import { cs, filterUndefined, isReactText, isString } from '../utils';
import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts';
import { NotificationProvider } from './context';
import NotificationButton from './notificationButton';
import NotificationIcon from './notificationIcon';
import NotificationText from './notificationText';
import NotificationTitle from './notificationTitle';
/**
 * Displays informational content, like text and icon with optional action buttons.
 * Handles multiple states, like info, error or loading.
 */
export const Notification = vui((props, ref) => {
    const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = 'subtleBlue', verticalAlign, ...rest } = props;
    const statuses = { ...notificationStatusMapping, ...statusMapping };
    const { variant = variantProp } = statuses[status ?? ''] ?? {};
    const styles = useStyleConfig('Notification', { variant, ...props });
    const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name;
    const context = filterUndefined({ size, status });
    const titleDisplay = action ? 'block' : 'inline-flex';
    const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start';
    return (_jsx(NotificationProvider, { value: context, children: _jsxs(Box, { borderRadius: "md", borderWidth: 1, className: cs('vui-notification', className), elevation: variant.includes('banner') ? bannerNotificationElevation : undefined, ref: ref, role: "mark", w: "fit-content", ...styles.container, ...rest, children: [iconName ? _jsx(NotificationIcon, { alignSelf: alignSelf, name: iconName }) : icon, children ?? (_jsxs(NotificationText, { alignSelf: alignSelf, children: [isReactText(title) ? _jsx(NotificationTitle, { display: titleDisplay, text: title }) : title, " ", text] })), action, onClose && (_jsx(NotificationButton, { alignSelf: alignSelf, "aria-label": "close", icon: "falTimes", onClick: onClose, variant: closeButtonVariantMapping?.[variant] ?? variant, w: "32px" }))] }) }));
});
Notification.Button = NotificationButton;
Notification.Icon = NotificationIcon;
Notification.Text = NotificationText;
Notification.Title = NotificationTitle;
Notification.displayName = 'Notification';
export default Notification;
//# sourceMappingURL=notification.js.map