import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from "react";
import { useEditContext } from "../client/editContext";
import { Popover, PopoverAnchor, PopoverContent, } from "../../components/ui/popover";
import { Button } from "../../components/ui/button";
/**
 * One-time hint shown the first time the user closes the editor form.
 * Anchors to the toolbar toggle button (registered via
 * `editContext.editorFormToggleButtonRef`) and stays open until the user
 * dismisses it.
 */
export function EditorFormHintPopover() {
    const editContext = useEditContext();
    const [anchorReady, setAnchorReady] = useState(false);
    const virtualRef = useMemo(() => ({
        get current() {
            return editContext?.editorFormToggleButtonRef?.current ?? null;
        },
    }), [editContext?.editorFormToggleButtonRef]);
    // Poll briefly after the hint is requested to wait for the toolbar button
    // to mount (it only renders when a page with layout is active).
    useEffect(() => {
        if (!editContext?.editorFormHintVisible) {
            setAnchorReady(false);
            return;
        }
        let cancelled = false;
        const check = () => {
            if (cancelled)
                return;
            if (editContext.editorFormToggleButtonRef?.current) {
                setAnchorReady(true);
            }
            else {
                requestAnimationFrame(check);
            }
        };
        check();
        return () => {
            cancelled = true;
        };
    }, [
        editContext?.editorFormHintVisible,
        editContext?.editorFormToggleButtonRef,
    ]);
    if (!editContext)
        return null;
    const open = editContext.editorFormHintVisible && anchorReady;
    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
            if (!next) {
                editContext.dismissEditorFormHint();
            }
        }, enableIframeClickDetection: false, children: [_jsx(PopoverAnchor, { virtualRef: virtualRef }), _jsx(PopoverContent, { side: "bottom", align: "end", sideOffset: 8, className: "w-80", "data-testid": "editor-form-hint-popover", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm font-semibold", children: "Editor form hidden" }), _jsx("p", { className: "text-sm text-gray-600", children: "You can bring the editor form back any time using this toolbar button." }), _jsx("div", { className: "flex justify-end pt-1", children: _jsx(Button, { size: "sm", onClick: () => editContext.dismissEditorFormHint(), "data-testid": "editor-form-hint-dismiss", children: "Got it" }) })] }) })] }));
}
//# sourceMappingURL=EditorFormHintPopover.js.map