import { jsx } from "react/jsx-runtime";
import react, { useCallback, useMemo, useState } from "react";
import { observer } from "@tachybase/schema";
import { ConfigProvider, Popover, theme } from "antd";
import { createStyles } from "antd-style";
import { useNiceDropdownMaxHeight } from "../../../common/useNiceDropdownHeight.mjs";
import { useFlag } from "../../../flag-provider/index.mjs";
import { useDesignable } from "../../../schema-component/index.mjs";
import { useSchemaInitializerStyles } from "../components/style.mjs";
import { SchemaInitializerContext } from "../context/index.mjs";
function _tagged_template_literal(strings, raw) {
    if (!raw) raw = strings.slice(0);
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    const data = _tagged_template_literal([
        "\n      .ant-popover-inner {\n        padding: ",
        ";\n        .ant-menu-submenu-title {\n          margin-block: 0;\n        }\n      }\n    "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
const defaultWrap = (s)=>s;
const useStyles = createStyles((param)=>{
    let { css, token } = param;
    return {
        popover: css(_templateObject(), "".concat(token.paddingXXS, "px 0"))
    };
});
function withInitializer(C) {
    const WithInitializer = observer((props)=>{
        const { designable, insertAdjacent } = useDesignable();
        const { isInSubTable } = useFlag() || {};
        const { insert, useInsert, wrap = defaultWrap, insertPosition = 'beforeEnd', onSuccess, designable: propsDesignable, popoverProps, children, popover = true, style, componentProps } = props;
        const insertCallback = useInsert ? useInsert() : insert;
        const insertSchema = useCallback((schema)=>{
            if (insertCallback) insertCallback(wrap(schema, {
                isInSubTable
            }));
            else insertAdjacent(insertPosition, wrap(schema, {
                isInSubTable
            }), {
                onSuccess
            });
        }, [
            insertCallback,
            wrap,
            insertAdjacent,
            insertPosition,
            onSuccess
        ]);
        const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles();
        const [visible, setVisible] = useState(false);
        const { token } = theme.useToken();
        const { styles } = useStyles();
        const dropdownMaxHeight = useNiceDropdownMaxHeight([
            visible
        ]);
        const cProps = useMemo(()=>({
                options: props,
                style,
                ...componentProps
            }), [
            componentProps,
            props,
            style
        ]);
        if (!designable && true !== propsDesignable) return null;
        return /*#__PURE__*/ jsx(SchemaInitializerContext.Provider, {
            value: {
                visible,
                setVisible,
                insert: insertSchema,
                options: props
            },
            children: false === popover ? /*#__PURE__*/ react.createElement(C, cProps) : /*#__PURE__*/ jsx(Popover, {
                placement: 'bottomLeft',
                ...popoverProps,
                arrow: false,
                overlayClassName: styles.popover,
                open: visible,
                onOpenChange: setVisible,
                content: wrapSSR(/*#__PURE__*/ jsx("div", {
                    className: "".concat(componentCls, " ").concat(hashId),
                    style: {
                        maxHeight: dropdownMaxHeight,
                        overflowY: 'auto'
                    },
                    children: /*#__PURE__*/ jsx(ConfigProvider, {
                        theme: {
                            components: {
                                Menu: {
                                    itemHeight: token.marginXL,
                                    borderRadius: token.borderRadiusSM,
                                    itemBorderRadius: token.borderRadiusSM,
                                    subMenuItemBorderRadius: token.borderRadiusSM
                                }
                            }
                        },
                        children: children
                    })
                })),
                children: /*#__PURE__*/ react.createElement(C, cProps)
            })
        });
    }, {
        displayName: "WithInitializer(".concat(C.displayName || C.name, ")")
    });
    return WithInitializer;
}
export { withInitializer };
