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

import { jsx as _jsx } from "react/jsx-runtime";
import { focusSafely } from '@react-aria/focus';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useFocusRing, useHover } from 'react-aria';
import { Item } from 'react-stately';
import { TransitionGroup } from 'react-transition-group';
import { useChainedCallback, useEvent } from '../../../../_internal/index.js';
import { tasty } from '../../../../tasty/index.js';
import { mergeProps } from '../../../../utils/react/index.js';
import { useNotificationsList } from '../hooks/index.js';
import { FloatingNotification } from './FloatingNotification.js';
import { TransitionComponent } from './TransitionComponent.js';
const NotificationsContainer = tasty({
    styles: {
        boxSizing: 'border-box',
        position: 'fixed',
        bottom: 'env(safe-area-inset-bottom, 0)',
        right: 'env(safe-area-inset-right, 0)',
        display: 'flex',
        flexDirection: 'column-reverse',
        width: 'auto 100% 50x',
        height: '100dvh max',
        padding: '2x',
        gap: '1x',
        /* to be sure that we're over the legacy modal and any widget as well */
        zIndex: 2147483647,
        overflow: 'hidden',
        isolation: 'isolate',
        pointerEvents: 'none',
    },
});
/**
 * @internal Do not use it
 */
export function NotificationsBar(props) {
    const { items, children, onRemoveNotification, onDismissNotification, limit = 5, } = props;
    const ref = useRef(null);
    const [realLimit, setRealLimit] = useState(limit + 1);
    const lastShownIdRef = useRef(null);
    const { listProps, state } = useNotificationsList({ items, children, ref });
    const { hoverProps, isHovered } = useHover({});
    const { focusProps, isFocusVisible } = useFocusRing({ within: true });
    const moveFocus = useEvent((key) => {
        const nextKey = state.collection.getKeyBefore(key.toString()) ??
            state.collection.getKeyAfter(key.toString()) ??
            state.collection.getLastKey();
        const elementToFocus = ref.current?.querySelector(`[data-id="${nextKey}"]`);
        if (elementToFocus) {
            focusSafely(elementToFocus);
        }
    });
    const chainedOnRemoveNotification = useChainedCallback(onRemoveNotification, moveFocus);
    let collection = [...state.collection].reverse();
    const collectionLength = collection.length;
    const lastShownNotificationIndex = collection.findIndex((notification) => notification.props.id === lastShownIdRef.current);
    if (lastShownNotificationIndex !== -1) {
        collection = collection.slice(0, lastShownNotificationIndex);
    }
    /**
     * Handy hack to improve animations if the limit is reached.
     */
    useLayoutEffect(() => {
        setRealLimit(limit + 1);
    }, [collectionLength]);
    useLayoutEffect(() => {
        if (realLimit > limit) {
            setRealLimit(limit);
        }
    }, [realLimit]);
    // Set the last notification that was gone off the limit
    collection.slice(realLimit).forEach((notification) => {
        // It's safe 'cause there is always only a single notification above the limit
        lastShownIdRef.current = notification.props.id;
    });
    useEffect(() => {
        // Auto-dismiss the last shown notification that was off the limit
        if (lastShownIdRef.current) {
            onDismissNotification(lastShownIdRef.current);
            onRemoveNotification(lastShownIdRef.current);
            const lastNotification = collection.find((notification) => notification.props.id === lastShownIdRef.current);
            lastNotification?.props.onDismiss?.();
        }
    }, [lastShownIdRef.current]);
    return (_jsx(NotificationsContainer, { ref: ref, qa: "NotificationsBar", role: "region", "aria-live": "polite", ...mergeProps(listProps, hoverProps, focusProps), children: _jsx(TransitionGroup, { enter: true, exit: true, component: null, children: collection.slice(0, realLimit).map((notification) => (_jsx(TransitionComponent, { children: _jsx(FloatingNotification, { isDisabledTimer: isHovered || isFocusVisible, id: notification.props.id, item: notification, state: state, onRemoveNotification: chainedOnRemoveNotification, onDismissNotification: onDismissNotification }) }, notification.props.id))) }) }));
}
NotificationsBar.Item = Item;

        