import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import react, { useContext, useEffect, useRef, useState } from "react";
import { RecursionField, observer, useField, useFieldSchema } from "@tachybase/schema";
import { createPortal } from "react-dom";
import { useStyles } from "./Action.Area.style.mjs";
import { useActionContext } from "./hooks.mjs";
const ActionAreaContext = /*#__PURE__*/ react.createContext({});
const ActionAreaProvider = (param)=>{
    let { children } = param;
    const [component, setComponent] = useState(()=>{});
    const [prevSetVisible, setPrevSetVisible] = useState(()=>{});
    const ref = useRef();
    return /*#__PURE__*/ jsx(ActionAreaContext.Provider, {
        value: {
            component,
            setComponent,
            prevSetVisible,
            setPrevSetVisible,
            ref
        },
        children: children
    });
};
const useActionAreaStub = ()=>{
    const { component } = useContext(ActionAreaContext);
    return component;
};
const ActionAreaStub = ()=>{
    const { ref } = useContext(ActionAreaContext);
    return /*#__PURE__*/ jsx("div", {
        ref: ref
    });
};
const ActionAreaPlayer = (param)=>{
    let { children } = param;
    const { visible, setVisible } = useActionContext();
    const { prevSetVisible, setPrevSetVisible, ref } = useContext(ActionAreaContext);
    useEffect(()=>{
        if (visible) null == setPrevSetVisible || setPrevSetVisible(()=>{
            null == prevSetVisible || prevSetVisible(false);
            setVisible(true);
            return setVisible;
        });
    }, [
        visible
    ]);
    return visible && ref.current ? /*#__PURE__*/ createPortal(children, ref.current) : null;
};
const ActionArea = observer((props)=>{
    const { footerNodeName = 'ActionArea.Footer' } = props;
    const schema = useFieldSchema();
    const field = useField();
    const { styles } = useStyles();
    const Current = ()=>/*#__PURE__*/ jsxs(Fragment, {
            children: [
                /*#__PURE__*/ jsxs("div", {
                    className: styles.footer,
                    children: [
                        /*#__PURE__*/ jsx("div", {
                            className: "title",
                            children: /*#__PURE__*/ jsx("strong", {
                                children: field.title
                            })
                        }),
                        /*#__PURE__*/ jsx(RecursionField, {
                            basePath: field.address,
                            schema: schema,
                            onlyRenderProperties: true,
                            filterProperties: (s)=>s['x-component'] === footerNodeName
                        })
                    ]
                }),
                /*#__PURE__*/ jsx("div", {
                    className: styles.container,
                    children: /*#__PURE__*/ jsx(RecursionField, {
                        basePath: field.address,
                        schema: schema,
                        onlyRenderProperties: true,
                        filterProperties: (s)=>s['x-component'] !== footerNodeName
                    })
                })
            ]
        });
    return /*#__PURE__*/ jsx(ActionAreaPlayer, {
        children: /*#__PURE__*/ jsx(Current, {})
    });
}, {
    displayName: 'ActionArea'
});
ActionArea.Footer = observer(()=>{
    const field = useField();
    const schema = useFieldSchema();
    return /*#__PURE__*/ jsx(RecursionField, {
        basePath: field.address,
        schema: schema,
        onlyRenderProperties: true
    });
}, {
    displayName: 'ActionArea.Footer'
});
const Action_Area = ActionArea;
export { ActionArea, ActionAreaPlayer, ActionAreaProvider, ActionAreaStub, Action_Area as default, useActionAreaStub };
