import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cn } from "@uipath/apollo-wind";
import { AnimatePresence, motion } from "motion/react";
import { memo, useMemo } from "react";
import { CanvasIcon } from "../../../utils/icon-registry.js";
import { CanvasTooltip } from "../../CanvasTooltip.js";
import { NodeViewportOverlay } from "../../NodeViewportOverlay.js";
import { ToolbarButton, ToolbarIconButton } from "../shared/index.js";
import { isSeparator } from "./NodeToolbar.utils.js";
import { useToolbarState } from "./useToolbarState.js";
const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
const POSITIONER_POSITION_CLASS = {
    top: 'top-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
    bottom: 'bottom-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
    left: 'left-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col',
    right: 'right-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col'
};
const TOOLBAR_OFFSET = 48;
const POSITIONER_ALIGN_CLASS = {
    start: 'justify-start',
    center: 'justify-center',
    end: 'justify-end'
};
const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
const CONTAINER_DIRECTION_CLASS = {
    top: 'flex-row min-h-10',
    bottom: 'flex-row min-h-10',
    left: 'flex-col min-w-10',
    right: 'flex-col min-w-10'
};
const SEPARATOR_BASE_CLASS = 'flex-[0_0_auto] bg-(--canvas-background-overlay) self-center';
const SEPARATOR_VERTICAL_CLASS = 'w-px h-5';
const SEPARATOR_HORIZONTAL_CLASS = 'w-full h-px';
const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[180px] bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.04)] p-1 pointer-events-auto";
const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar, portalToNodeOverlay })=>{
    const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = useToolbarState({
        config,
        expanded,
        nodeId,
        hidden
    });
    const position = config.position || 'top';
    const align = config.align || 'center';
    const positionerClassName = useMemo(()=>cn(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
        position,
        align
    ]);
    const containerClassName = useMemo(()=>cn(CONTAINER_BASE_CLASS, CONTAINER_DIRECTION_CLASS[position]), [
        position
    ]);
    const separatorClassName = useMemo(()=>cn(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
        separatorOrientation
    ]);
    const offsetStyle = useMemo(()=>{
        if (!offsetToolbar) return;
        return {
            '--toolbar-offset': `${TOOLBAR_OFFSET}px`
        };
    }, [
        offsetToolbar
    ]);
    const toolbarAnimationVariants = useMemo(()=>{
        const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
        const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
        const offset = 'pinned' !== displayState ? {
            [offsetAxis]: offsetAmount
        } : {};
        const offsetAtRest = 'pinned' !== displayState ? {
            [offsetAxis]: 0
        } : {};
        return {
            initial: {
                opacity: 0,
                ...offset
            },
            animate: {
                opacity: 1,
                ...offsetAtRest
            },
            exit: {
                opacity: 0,
                ...offset
            }
        };
    }, [
        position,
        displayState
    ]);
    if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
    const toolbarContent = /*#__PURE__*/ jsx(AnimatePresence, {
        children: 'hidden' !== displayState && /*#__PURE__*/ jsx("div", {
            className: positionerClassName,
            style: offsetStyle,
            children: /*#__PURE__*/ jsxs(motion.div, {
                layout: "position",
                className: containerClassName,
                initial: toolbarAnimationVariants.initial,
                animate: toolbarAnimationVariants.animate,
                exit: toolbarAnimationVariants.exit,
                transition: {
                    duration: 0.15,
                    ease: 'easeOut'
                },
                role: "toolbar",
                children: [
                    actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx("div", {
                            className: separatorClassName
                        }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
                            action: item,
                            layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
                        }, item.id)),
                    shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            actionsToDisplay.length > 0 && /*#__PURE__*/ jsx("div", {
                                className: separatorClassName
                            }),
                            /*#__PURE__*/ jsxs("div", {
                                className: "relative",
                                children: [
                                    /*#__PURE__*/ jsx(CanvasTooltip, {
                                        content: config.overflowLabel ?? 'More options',
                                        placement: "top",
                                        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
                                            ref: buttonRef,
                                            type: "button",
                                            className: "nodrag nopan",
                                            onClick: toggleDropdown,
                                            "aria-label": config.overflowLabel ?? 'More options',
                                            "aria-expanded": isDropdownOpen,
                                            "aria-haspopup": "menu",
                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
                                                icon: "ellipsis-vertical",
                                                size: 16
                                            })
                                        })
                                    }),
                                    /*#__PURE__*/ jsx(AnimatePresence, {
                                        children: isDropdownOpen && /*#__PURE__*/ jsx(motion.div, {
                                            ref: dropdownRef,
                                            className: DROPDOWN_MENU_CLASS,
                                            initial: {
                                                opacity: 0,
                                                x: -8
                                            },
                                            animate: {
                                                opacity: 1,
                                                x: 0
                                            },
                                            exit: {
                                                opacity: 0,
                                                x: -8
                                            },
                                            transition: {
                                                duration: 0.15
                                            },
                                            role: "menu",
                                            "aria-label": config.overflowLabel ?? 'More options',
                                            children: overflowActionsToDisplay.map((item, i)=>{
                                                if (isSeparator(item)) return /*#__PURE__*/ jsx("div", {
                                                    className: cn(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
                                                }, `separator-${i}`);
                                                return /*#__PURE__*/ jsxs("button", {
                                                    type: "button",
                                                    className: cn(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
                                                    onClick: (e)=>{
                                                        e.stopPropagation();
                                                        e.preventDefault();
                                                        if (!item.disabled) {
                                                            item.onClick();
                                                            setIsDropdownOpen(false);
                                                        }
                                                    },
                                                    "aria-label": item.label,
                                                    "aria-disabled": item.disabled,
                                                    disabled: item.disabled,
                                                    role: "menuitem",
                                                    children: [
                                                        item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
                                                            style: {
                                                                flex: 'unset',
                                                                display: 'inline-flex'
                                                            },
                                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
                                                                icon: item.icon,
                                                                size: 16
                                                            })
                                                        }),
                                                        item.icon && 'string' != typeof item.icon && item.icon,
                                                        /*#__PURE__*/ jsx("span", {
                                                            className: "flex-1 text-(--canvas-foreground)",
                                                            children: item.label
                                                        })
                                                    ]
                                                }, item.id);
                                            })
                                        })
                                    })
                                ]
                            })
                        ]
                    })
                ]
            })
        })
    });
    if (portalToNodeOverlay) return /*#__PURE__*/ jsx(NodeViewportOverlay, {
        nodeId: nodeId,
        layer: "nodeToolbar",
        children: toolbarContent
    });
    return toolbarContent;
};
const NodeToolbar = /*#__PURE__*/ memo(NodeToolbarComponent);
export { NodeToolbar };
