import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
import { memo, useCallback } from "react";
import { GRID_SPACING } from "../../constants.js";
import { CanvasIcon } from "../../utils/icon-registry.js";
import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
import { BottomCornerIndicators, GroupContainer, GroupContent, GroupControls, GroupHeader, GroupHeaderButton, GroupHeaderSeparator, GroupIconWrapper, GroupTitle, ResizeHandle, TopCornerIndicators } from "./GroupNode.styles.js";
import { useGroupNodeConfig } from "./GroupNodeConfigContext.js";
const minWidth = 12 * GRID_SPACING;
const minHeight = 12 * GRID_SPACING;
const COLLAPSED_HEADER_HEIGHT = 64;
const GroupNodeComponent = ({ id, data, selected })=>{
    const { setNodes, setEdges, getNodes } = useReactFlow();
    const { headerActions, executionStatus, onMoreOptions, hideMoreOptions, hideCollapseButton } = useGroupNodeConfig();
    const title = data.title || 'Group';
    const iconName = data.iconName;
    const backgroundColor = data.backgroundColor;
    const borderColor = data.borderColor;
    const collapsed = data.collapsed || false;
    const handleToggleCollapse = useCallback(()=>{
        const willCollapse = !collapsed;
        const childNodeIds = new Set(getNodes().filter((n)=>n.parentId === id).map((n)=>n.id));
        if (willCollapse) setNodes((nodes)=>nodes.map((node)=>{
                if (node.id === id) {
                    const styleHeight = node.style?.height;
                    const parsedStyleHeight = 'number' == typeof styleHeight ? styleHeight : 'string' == typeof styleHeight ? parseFloat(styleHeight) || void 0 : void 0;
                    const currentHeight = node.height ?? node.measured?.height ?? parsedStyleHeight ?? minHeight;
                    return {
                        ...node,
                        height: COLLAPSED_HEADER_HEIGHT,
                        style: {
                            ...node.style,
                            height: COLLAPSED_HEADER_HEIGHT
                        },
                        data: {
                            ...node.data,
                            collapsed: true,
                            expandedHeight: currentHeight
                        }
                    };
                }
                if (childNodeIds.has(node.id)) return {
                    ...node,
                    hidden: true
                };
                return node;
            }));
        else {
            const expandedHeight = data.expandedHeight ?? minHeight;
            setNodes((nodes)=>nodes.map((node)=>{
                    if (node.id === id) return {
                        ...node,
                        height: expandedHeight,
                        style: {
                            ...node.style,
                            height: expandedHeight
                        },
                        data: {
                            ...node.data,
                            collapsed: false
                        }
                    };
                    if (childNodeIds.has(node.id)) return {
                        ...node,
                        hidden: false
                    };
                    return node;
                }));
        }
        setEdges((edges)=>edges.map((edge)=>childNodeIds.has(edge.source) || childNodeIds.has(edge.target) ? {
                    ...edge,
                    hidden: willCollapse
                } : edge));
    }, [
        id,
        collapsed,
        data.expandedHeight,
        getNodes,
        setNodes,
        setEdges
    ]);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            !collapsed && /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ jsx(NodeResizeControl, {
                        style: {
                            background: 'transparent',
                            border: 'none',
                            zIndex: 100
                        },
                        position: "top-left",
                        minWidth: minWidth,
                        minHeight: minHeight,
                        children: /*#__PURE__*/ jsx(ResizeHandle, {
                            selected: selected,
                            cursor: "nwse-resize"
                        })
                    }),
                    /*#__PURE__*/ jsx(NodeResizeControl, {
                        style: {
                            background: 'transparent',
                            border: 'none',
                            zIndex: 100
                        },
                        position: "top-right",
                        minWidth: minWidth,
                        minHeight: minHeight,
                        children: /*#__PURE__*/ jsx(ResizeHandle, {
                            selected: selected,
                            cursor: "nesw-resize"
                        })
                    }),
                    /*#__PURE__*/ jsx(NodeResizeControl, {
                        style: {
                            background: 'transparent',
                            border: 'none',
                            zIndex: 100
                        },
                        position: "bottom-left",
                        minWidth: minWidth,
                        minHeight: minHeight,
                        children: /*#__PURE__*/ jsx(ResizeHandle, {
                            selected: selected,
                            cursor: "nesw-resize"
                        })
                    }),
                    /*#__PURE__*/ jsx(NodeResizeControl, {
                        style: {
                            background: 'transparent',
                            border: 'none',
                            zIndex: 100
                        },
                        position: "bottom-right",
                        minWidth: minWidth,
                        minHeight: minHeight,
                        children: /*#__PURE__*/ jsx(ResizeHandle, {
                            selected: selected,
                            cursor: "nwse-resize"
                        })
                    })
                ]
            }),
            /*#__PURE__*/ jsxs(GroupContainer, {
                backgroundColor: backgroundColor,
                borderColor: borderColor,
                selected: selected,
                collapsed: collapsed,
                executionStatus: executionStatus,
                children: [
                    /*#__PURE__*/ jsx(TopCornerIndicators, {
                        selected: selected
                    }),
                    /*#__PURE__*/ jsx(BottomCornerIndicators, {
                        selected: selected
                    }),
                    /*#__PURE__*/ jsxs(GroupHeader, {
                        children: [
                            iconName && /*#__PURE__*/ jsx(GroupIconWrapper, {
                                children: /*#__PURE__*/ jsx(CanvasIcon, {
                                    icon: iconName,
                                    size: 16
                                })
                            }),
                            /*#__PURE__*/ jsx(GroupTitle, {
                                children: title
                            }),
                            /*#__PURE__*/ jsxs(GroupControls, {
                                children: [
                                    headerActions && /*#__PURE__*/ jsxs(Fragment, {
                                        children: [
                                            /*#__PURE__*/ jsx(GroupHeaderSeparator, {}),
                                            headerActions
                                        ]
                                    }),
                                    !hideCollapseButton && /*#__PURE__*/ jsxs(Fragment, {
                                        children: [
                                            /*#__PURE__*/ jsx(GroupHeaderSeparator, {}),
                                            /*#__PURE__*/ jsx(GroupHeaderButton, {
                                                type: "button",
                                                className: "nodrag nopan",
                                                onClick: handleToggleCollapse,
                                                "aria-label": collapsed ? 'Expand group' : 'Collapse group',
                                                title: collapsed ? 'Expand group' : 'Collapse group',
                                                children: /*#__PURE__*/ jsx(CanvasIcon, {
                                                    icon: collapsed ? 'chevron-down' : 'chevron-up',
                                                    size: 16
                                                })
                                            })
                                        ]
                                    }),
                                    !hideMoreOptions && /*#__PURE__*/ jsx(GroupHeaderButton, {
                                        type: "button",
                                        className: "nodrag nopan",
                                        onClick: onMoreOptions,
                                        "aria-label": "More options",
                                        title: "More options",
                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
                                            icon: "ellipsis-vertical",
                                            size: 16
                                        })
                                    })
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsx(GroupContent, {
                        collapsed: collapsed
                    })
                ]
            })
        ]
    });
};
const GroupNode = /*#__PURE__*/ memo(GroupNodeComponent, areNodePropsEqualIgnoringPosition);
export { GroupNode };
