"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableToolbar = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ToolbarMenu_1 = require("nice-ui/lib/4-card/Toolbar/ToolbarMenu");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const PositionAtPoint_1 = require("nice-ui/lib/utils/popup/PositionAtPoint");
const context_1 = require("nice-ui/lib/4-card/Popup/context");
const ClickAway_1 = require("nice-ui/lib/utils/ClickAway");
const ToolbarMenuProvider_1 = require("nice-ui/lib/4-card/Toolbar/ToolbarMenu/ToolbarMenuProvider");
const MoveToViewport_1 = require("nice-ui/lib/utils/popup/MoveToViewport");
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_1.PositionAtPoint, { point: typeof expandPoint === 'function' ? expandPoint() : expandPoint },
            React.createElement(ClickAway_1.ClickAway, { onClickAway: handleContextMenuClickAway },
                React.createElement(context_1.context.Provider, { value: popupContextValue },
                    React.createElement(ToolbarMenuProvider_1.ToolbarMenuProvider, { ...rest },
                        React.createElement(MoveToViewport_1.MoveToViewport, null,
                            React.createElement(ContextMenu_1.ContextMenu, { inset: true, showSearch: true, ...context, menu: rest.menu, onEsc: () => setView('toolbar') })))))));
    }
    return (React.createElement(ToolbarMenu_1.ToolbarMenu, { ...rest, more: {
            ...more,
            onClick: expandPoint
                ? () => {
                    setView('context');
                }
                : undefined,
        } }));
};
exports.ExpandableToolbar = ExpandableToolbar;
//# sourceMappingURL=ExpandableToolbar.js.map