import React, { memo, useContext } from 'react';
import CloseButton from '../CloseButton';
import { ToastContext } from './ToastContext';
import { st, classes } from './Toast.st.css.js';
import { useHorizontalSwipe } from './hooks/useHorizontalSwipe';
const DEFAULT_ROLE = 'status';
const Toast = memo(({ dataHook, id, role = DEFAULT_ROLE, className, dismissible, dismissLabel, onDismiss, children, }) => {
    const ariaLive = role === 'alert' ? 'assertive' : 'polite';
    const hidden = useContext(ToastContext)?.hidden ?? false;
    const swipeHandlers = useHorizontalSwipe({
        onSwipe: () => dismissible && onDismiss?.(),
        disabled: hidden || !dismissible,
    });
    const handleDismissClick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        onDismiss?.(event);
    };
    return (React.createElement("div", { id: id, className: st(classes.root, className), "data-hook": dataHook, role: role, "aria-live": ariaLive, "aria-hidden": hidden, ...swipeHandlers },
        React.createElement("div", { "data-hook": "toast-content", className: classes.content }, children),
        dismissible && (React.createElement("div", { className: classes.dismiss },
            React.createElement(CloseButton, { className: classes.dismissButton, dataHook: "toast-dismiss-button", skin: "light", size: "medium", "aria-label": dismissLabel, disabled: hidden, onClick: handleDismissClick })))));
});
Toast.displayName = 'Toast';
export default Toast;
//# sourceMappingURL=Toast.js.map