import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { RecursionField, SchemaExpressionScopeContext, observer, useField, useFieldSchema } from "@tachybase/schema";
import { createStyles } from "antd-style";
import { createPortal } from "react-dom";
import { useActionContext } from "./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      display: flex;\n      width: 100%;\n      .ant-btn {\n        margin-right: 8px;\n      }\n    "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
const useScope = (key)=>{
    const scope = useContext(SchemaExpressionScopeContext);
    return scope[key];
};
const useStyles = createStyles((param)=>{
    let { css } = param;
    return {
        container: css(_templateObject())
    };
});
const ActionPage = observer((props)=>{
    const { footerNodeName = 'Action.Page.Footer', ...others } = props;
    const { containerRefKey, visible, setVisible } = useActionContext();
    const containerRef = useScope(containerRefKey);
    const { styles } = useStyles();
    const schema = useFieldSchema();
    const field = useField();
    const footerSchema = schema.reduceProperties((buf, s)=>{
        if (s['x-component'] === footerNodeName) return s;
        return buf;
    });
    return /*#__PURE__*/ jsx(Fragment, {
        children: (null == containerRef ? void 0 : containerRef.current) && visible && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("div", {
            "data-testid": "action-page",
            className: "tb-action-page",
            children: [
                /*#__PURE__*/ jsx(RecursionField, {
                    basePath: field.address,
                    schema: schema,
                    onlyRenderProperties: true,
                    filterProperties: (s)=>s['x-component'] !== footerNodeName
                }),
                footerSchema && /*#__PURE__*/ jsx("div", {
                    className: styles.container,
                    children: /*#__PURE__*/ jsx(RecursionField, {
                        basePath: field.address,
                        schema: schema,
                        onlyRenderProperties: true,
                        filterProperties: (s)=>s['x-component'] === footerNodeName
                    })
                })
            ]
        }), null == containerRef ? void 0 : containerRef.current)
    });
}, {
    displayName: 'ActionPage'
});
ActionPage.Footer = observer(()=>{
    const field = useField();
    const schema = useFieldSchema();
    return /*#__PURE__*/ jsx(RecursionField, {
        basePath: field.address,
        schema: schema,
        onlyRenderProperties: true
    });
}, {
    displayName: 'ActionPage.Footer'
});
const Action_Page = ActionPage;
export { ActionPage, Action_Page as default };
