/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-6b06f3c
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { useFocusRing, useHover } from 'react-aria';
import { useEvent, useTimer } from '../../../../_internal/index.js';
import { tasty } from '../../../../tasty/index.js';
import { ClearSlots, mergeProps } from '../../../../utils/react/index.js';
import { useId } from '../../../../utils/react/useId.js';
import { useNotificationsDialogContext } from '../Dialog/NotificationsDialogContext.js';
import { NotificationCloseButton } from './NotificationCloseButton.js';
import { NotificationDescription } from './NotificationDescription.js';
import { NotificationFooter } from './NotificationFooter.js';
import { NotificationHeader } from './NotificationHeader.js';
import { NotificationIcon } from './NotificationIcon.js';
import { NotificationProvider } from './NotificationProvider.js';
const NotificationContainer = tasty({
    styles: {
        boxSizing: 'border-box',
        position: 'relative',
        display: 'grid',
        width: '100%',
        padding: '0.5x 0.5x 1.5x 1.5x',
        gridAreas: `
      ".    . .           .      close"
      "icon . header      .      close"
      "icon . description .      close"
      ".    . footer      footer footer"
    `,
        gridColumns: 'min-content 1x minmax(0, auto) 1x minmax(0, min-content)',
        gridRows: '1x minmax(0, auto) minmax(0, auto) minmax(0, auto)',
        fill: '#white',
        radius: '1cr',
        boxShadow: {
            '': '0 0 0 4bw #purple-04.0 inset',
            focused: '0 0 0 4bw #purple-04 inset',
        },
        outline: 0,
        border: {
            '': '#border',
            'type=success': '#success.4',
            'type=danger': '#danger.4',
            'type=attention': '#border',
            // Clear border when inside dialog
            'inside-dialog': false,
        },
    },
});
/**
 * @internal This component is unstable and is a subject to change.
 */
export const NotificationView = forwardRef(function NotificationView(props, ref) {
    const { onClose, actions, header, icon, description, id, styles, type = 'attention', isDismissible = true, duration = null, attributes = {}, qa = 'notification', timer: propsTimer, onDismiss, } = props;
    const labelID = useId();
    const descriptionID = useId();
    // Detect if we're inside a NotificationsDialog specifically
    const insideNotificationsDialog = useNotificationsDialogContext();
    const onCloseEvent = useEvent(() => {
        onClose?.();
    });
    const onDismissEvent = useEvent(() => {
        if (isDismissible) {
            onDismiss?.();
        }
    });
    const { hoverProps, isHovered } = useHover({});
    const { isFocusVisible, focusProps } = useFocusRing({ within: true });
    useTimer({
        timer: propsTimer,
        delay: duration,
        callback: onDismissEvent,
        isDisabled: isFocusVisible || isHovered || !isDismissible,
    });
    return (_jsx(ClearSlots, { children: _jsx(NotificationProvider, { onClose: onClose, children: _jsxs(NotificationContainer, { ...mergeProps(attributes, hoverProps, focusProps), ref: ref, styles: styles, "data-id": id, "data-qa": qa, "data-type": type, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: {
                    focused: isFocusVisible,
                    'is-dismissible': isDismissible,
                    'inside-dialog': insideNotificationsDialog,
                }, children: [_jsx(NotificationIcon, { icon: icon, type: type }), _jsx(NotificationHeader, { header: header, id: labelID }), description && (_jsx(NotificationDescription, { description: description, id: descriptionID })), _jsx(NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }), isDismissible && (_jsx(NotificationCloseButton, { onPress: onDismissEvent }))] }) }) }));
});

        