import { jsx, jsxs } from "react/jsx-runtime";
import { MetadataForm, cn } from "@uipath/apollo-wind";
import { GripVertical, X } from "lucide-react";
import { useMemo } from "react";
const SURFACE_REMAP = {
    '--surface-raised': 'var(--surface-overlay)'
};
function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, resetKey, className, contentInset = '1.5rem', children, headerExtra }) {
    const hasNodeHeader = !!(nodeLabel || nodeCategory || nodeIcon || action);
    const formSchema = useMemo(()=>schema && void 0 === schema.actions ? {
            ...schema,
            actions: []
        } : schema, [
        schema
    ]);
    return /*#__PURE__*/ jsxs("div", {
        className: cn('flex min-h-0 flex-col bg-surface-raised', className),
        style: {
            '--mf-content-inset': contentInset
        },
        children: [
            panelTitle && /*#__PURE__*/ jsxs("div", {
                className: "flex h-10 shrink-0 items-center justify-between px-2",
                children: [
                    /*#__PURE__*/ jsxs("div", {
                        className: "flex items-center gap-1",
                        children: [
                            /*#__PURE__*/ jsx("div", {
                                className: "grid size-8 place-items-center text-foreground-subtle",
                                children: /*#__PURE__*/ jsx(GripVertical, {
                                    size: 14
                                })
                            }),
                            /*#__PURE__*/ jsx("span", {
                                className: "text-sm font-semibold text-foreground",
                                children: panelTitle
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsxs("div", {
                        className: "flex items-center gap-1",
                        children: [
                            headerExtra,
                            onClose && /*#__PURE__*/ jsx("button", {
                                type: "button",
                                onClick: onClose,
                                title: "Close",
                                "aria-label": "Close",
                                className: "grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
                                children: /*#__PURE__*/ jsx(X, {
                                    size: 14
                                })
                            })
                        ]
                    })
                ]
            }),
            hasNodeHeader && /*#__PURE__*/ jsxs("div", {
                className: "flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1.5rem)]",
                children: [
                    /*#__PURE__*/ jsxs("div", {
                        className: "flex min-w-0 flex-1 items-center gap-3.5",
                        children: [
                            nodeIcon && /*#__PURE__*/ jsx("div", {
                                className: "grid size-11 shrink-0 place-items-center rounded-xl bg-surface-overlay text-foreground-subtle [&>svg]:size-5",
                                children: nodeIcon
                            }),
                            /*#__PURE__*/ jsxs("div", {
                                className: "flex min-w-0 flex-1 flex-col justify-center",
                                children: [
                                    nodeLabel && /*#__PURE__*/ jsx("span", {
                                        className: "block truncate text-base font-semibold leading-5 tracking-[-0.3px] text-foreground",
                                        children: nodeLabel
                                    }),
                                    nodeCategory && /*#__PURE__*/ jsx("span", {
                                        className: "block truncate text-xs leading-4 text-foreground-muted",
                                        children: nodeCategory
                                    })
                                ]
                            })
                        ]
                    }),
                    action && /*#__PURE__*/ jsx("div", {
                        className: "flex shrink-0 items-center gap-2",
                        children: action
                    })
                ]
            }),
            children ? /*#__PURE__*/ jsx("div", {
                className: "min-h-0 flex-1 overflow-auto",
                style: SURFACE_REMAP,
                children: children
            }) : formSchema ? /*#__PURE__*/ jsx("div", {
                className: "min-h-0 flex-1 overflow-auto",
                children: /*#__PURE__*/ jsx("div", {
                    style: SURFACE_REMAP,
                    className: "[&_label]:text-foreground-muted",
                    children: /*#__PURE__*/ jsx(MetadataForm, {
                        schema: formSchema,
                        plugins: plugins,
                        stepVariant: "tabs",
                        onSubmit: onSubmit,
                        disabled: disabled,
                        className: "flex flex-col gap-4 pb-6 pt-3 [padding-inline:var(--mf-content-inset)]"
                    }, resetKey)
                })
            }) : /*#__PURE__*/ jsx("div", {
                className: "py-4 text-xs text-foreground-subtle [padding-inline:var(--mf-content-inset,1.5rem)]",
                children: "No form schema defined for this node."
            })
        ]
    });
}
export { NodePropertyPanel };
