import * as React from 'react';
import { ToolbarMenu } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu';
import { ContextMenu } from 'nice-ui/lib/4-card/ContextMenu';
import { PositionAtPoint } from 'nice-ui/lib/utils/popup/PositionAtPoint';
import { context as popupContext } from 'nice-ui/lib/4-card/Popup/context';
import { ClickAway } from 'nice-ui/lib/utils/ClickAway';
import { ToolbarMenuProvider } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/ToolbarMenuProvider';
import { MoveToViewport } from 'nice-ui/lib/utils/popup/MoveToViewport';
export const ExpandableToolbar = (props) => {
    const { expandPoint, more, context, ...rest } = props;
    const [view, setView] = React.useState('toolbar');
    const popupContextValue = React.useMemo(() => ({
        close: () => {
            setView('toolbar');
        },
    }), []);
    const handleContextMenuClickAway = React.useCallback(() => {
        setView('toolbar');
    }, []);
    if (view === 'context') {
        if (!expandPoint)
            return null;
        return (React.createElement(PositionAtPoint, { point: typeof expandPoint === 'function' ? expandPoint() : expandPoint },
            React.createElement(ClickAway, { onClickAway: handleContextMenuClickAway },
                React.createElement(popupContext.Provider, { value: popupContextValue },
                    React.createElement(ToolbarMenuProvider, { ...rest },
                        React.createElement(MoveToViewport, null,
                            React.createElement(ContextMenu, { inset: true, showSearch: true, ...context, menu: rest.menu, onEsc: () => setView('toolbar') })))))));
    }
    return (React.createElement(ToolbarMenu, { ...rest, more: {
            ...more,
            onClick: expandPoint
                ? () => {
                    setView('context');
                }
                : undefined,
        } }));
};
//# sourceMappingURL=ExpandableToolbar.js.map