import React, { useEffect, useRef, useState } from 'react';
import { Box, SectionHelper, Table, } from '@wix/design-system';
import { Fade } from '../Fade';
import { Collapse } from '../Collapse';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { TableTopNotificationState } from './TableTopNotificationState';
function _TableTopNotification(props) {
    const { onClose, showCloseButton = !!onClose, onAfterClose, onAfterOpen, hideOnSearch, children, appearance = 'standard', ...rest } = props;
    const toolbarCollectionState = useToolbarCollectionContext();
    const { collection, totalStickyContentHeight } = toolbarCollectionState;
    const { _topNotification: topNotification, query: { search }, } = collection;
    const [state] = useState(() => new TableTopNotificationState({
        topNotification,
        getStickyContentHeight: () => toolbarCollectionState.totalStickyContentHeight,
        reportBI: toolbarCollectionState.reportBi,
    }));
    const targetRef = useRef(null);
    useEffect(() => state.init(), []);
    const { position } = state;
    const { data: text, show } = topNotification;
    let child;
    if (hideOnSearch && !search.isEmpty) {
        child = null;
    }
    else {
        child = (React.createElement(Collapse, { timeout: 300, state: topNotification, onEntered: onAfterOpen, style: {
                flexShrink: 0,
                ...(position === 'sticky' &&
                    totalStickyContentHeight != null && {
                    position: 'sticky',
                    top: totalStickyContentHeight,
                    zIndex: 1100,
                }),
                width: '100%',
            } },
            React.createElement(Table.SubToolbar, null,
                React.createElement(Fade, { timeout: 300, in: show, unmountOnExit: true },
                    React.createElement(Box, { paddingTop: "15px", paddingBottom: "15px" },
                        React.createElement(SectionHelper, { ...rest, dataHook: "table-top-notification", showCloseButton: showCloseButton, onClose: (e) => {
                                topNotification.clickClose(onAfterClose);
                                onClose?.(e);
                            }, appearance: appearance },
                            text,
                            children))))));
    }
    return (React.createElement(React.Fragment, null,
        child,
        React.createElement("div", { ref: (el) => {
                targetRef.current = el;
            } })));
}
export const TableTopNotification = observer(_TableTopNotification);
TableTopNotification.displayName = 'TableTopNotification';
//# sourceMappingURL=TableTopNotification.js.map