import * as React from 'react';
import { Popup } from '@cainiaofe/cn-domain-popup';
import { getPopupContainer } from '../../../../../../../utils/floating-layer.js';
import { FormulaFieldConfigPanel } from '../../../../toolbar/components/add-field/formula-field';
export const FormulaFieldConfigPanelPopup = ({ visible, onVisibleChange, headerRef, editingFormulaColumn, handleEditFormulaConfigSave, handleEditFormulaConfigCancel, }) => {
    const virtualReference = React.useMemo(() => ({
        getBoundingClientRect: () => {
            var _a;
            const rect = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            return (rect ||
                {
                    x: 0,
                    y: 0,
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    width: 0,
                    height: 0,
                });
        },
    }), [headerRef]);
    React.useEffect(() => {
        if (!visible) {
            return;
        }
        const handleClose = () => {
            onVisibleChange(false);
        };
        window.addEventListener('resize', handleClose);
        return () => {
            window.removeEventListener('resize', handleClose);
        };
    }, [onVisibleChange, visible]);
    if (!visible || !headerRef.current) {
        return null;
    }
    return (React.createElement(Popup, { visible: visible, onVisibleChange: onVisibleChange, virtualReference: virtualReference, offset: 8, canCloseByOutSideClick: false, container: getPopupContainer },
        React.createElement(FormulaFieldConfigPanel, { isEditStatus: true, fieldLabel: editingFormulaColumn.columnName, columnCode: editingFormulaColumn.columnCode, initialExpression: editingFormulaColumn.expression, onSave: handleEditFormulaConfigSave, onCancel: handleEditFormulaConfigCancel })));
};
export default FormulaFieldConfigPanelPopup;
