import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { Menu, MenuItem, styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import react from "react";
import { useScheduledCallback } from "../../../hooks/use-scheduled-callback.js";
import { useChatService } from "../../../providers/chat-service.provider.js";
import { useChatState } from "../../../providers/chat-state-provider.js";
import { AutopilotChatRole } from "../../../service/index.js";
import { AutopilotChatActionButton } from "../../common/action-button.js";
const ActionsListContainer = styled('div')(({ isRequest })=>({
        display: 'flex',
        gap: apollo_core.Spacing.SpacingMicro,
        position: 'absolute',
        bottom: isRequest ? `-${apollo_core.Spacing.SpacingS}` : `-${apollo_core.Spacing.SpacingXl}`,
        ...isRequest ? {
            right: apollo_core.Spacing.SpacingS,
            backgroundColor: 'var(--color-background)',
            borderRadius: apollo_core.Border.BorderRadiusM,
            border: "1px solid var(--color-border-grid)"
        } : {
            left: 0
        },
        transition: 'opacity 0.2s ease-in-out',
        zIndex: 1
    }));
function AutopilotChatActionsListComponent({ message, defaultActions, isVisible, setIsVisible, onHoverChange, actionsContainerRef }) {
    const { _ } = useLingui();
    const { portalContainer } = useChatState();
    const [anchorEl, setAnchorEl] = react.useState(null);
    const overflowMenuOpen = Boolean(anchorEl);
    const overflowButtonRef = react.useRef(null);
    const popoverActionRef = react.useRef(null);
    const updatePosition = react.useCallback(()=>{
        if (popoverActionRef.current) popoverActionRef.current.updatePosition();
    }, []);
    const schedulePositionUpdate = useScheduledCallback(updatePosition);
    const handleTransitionEnter = react.useCallback(()=>{
        schedulePositionUpdate();
    }, [
        schedulePositionUpdate
    ]);
    const handleTransitionEntered = react.useCallback(()=>{
        schedulePositionUpdate();
    }, [
        schedulePositionUpdate
    ]);
    const mainActions = [
        ...defaultActions?.filter((action)=>!action.showInOverflow) || [],
        ...message?.actions?.filter((action)=>!action.showInOverflow) || []
    ];
    const overflowActions = [
        ...defaultActions?.filter((action)=>action.showInOverflow) || [],
        ...message?.actions?.filter((action)=>action.showInOverflow) || []
    ];
    const shouldBeVisible = isVisible || overflowMenuOpen;
    const chatService = useChatService();
    const handleAction = react.useCallback(async (action)=>{
        if (!action.eventName || !chatService) return;
        const group = chatService.getMessagesInGroup(message.groupId ?? '');
        const currentMessage = chatService.getConversation().find((m)=>m.id === message.id);
        if (action.details?.preHookAction) {
            const proceed = await chatService.getPreHook(action.details.preHookAction)({
                isPositive: action.details.isPositive,
                group,
                message: currentMessage
            });
            if (!proceed) return;
        }
        chatService._eventBus.publish(action.eventName, {
            group,
            message: currentMessage,
            action
        });
    }, [
        message,
        chatService
    ]);
    const handleOpenOverflowMenu = react.useCallback((event)=>{
        setAnchorEl(event.currentTarget);
        setIsVisible(true);
    }, [
        setIsVisible
    ]);
    const handleCloseOverflowMenu = react.useCallback(()=>{
        setAnchorEl(null);
        setIsVisible(false);
    }, [
        setIsVisible
    ]);
    const handleMouseEnter = react.useCallback(()=>{
        setIsVisible(true);
        onHoverChange?.(true);
    }, [
        setIsVisible,
        onHoverChange
    ]);
    const handleMouseLeave = react.useCallback(()=>{
        if (!overflowMenuOpen) onHoverChange?.(false);
    }, [
        overflowMenuOpen,
        onHoverChange
    ]);
    const containerRef = react.useCallback((node)=>{
        if (actionsContainerRef) actionsContainerRef(node);
    }, [
        actionsContainerRef
    ]);
    return /*#__PURE__*/ jsxs(ActionsListContainer, {
        ref: containerRef,
        isRequest: message.role === AutopilotChatRole.User,
        style: {
            opacity: shouldBeVisible ? 1 : 0
        },
        role: "group",
        "aria-label": _({
            id: 'autopilot-chat.message.actions.label'
        }),
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        onFocus: handleMouseEnter,
        children: [
            mainActions.map((action)=>/*#__PURE__*/ jsx(AutopilotChatActionButton, {
                    onClick: ()=>handleAction(action),
                    onKeyDown: (ev)=>{
                        if ('Enter' === ev.key || ' ' === ev.key) handleAction(action);
                    },
                    onMouseEnter: handleMouseEnter,
                    onMouseLeave: handleMouseLeave,
                    onFocus: handleMouseEnter,
                    iconName: action.icon ?? '',
                    iconSize: "16px",
                    tooltip: action.label,
                    ariaLabel: action.label,
                    variant: action.disabled ? 'normal' : 'outlined',
                    disableInteractiveTooltip: false,
                    disabled: action.disabled ?? false,
                    "data-testid": `autopilot-chat-message-action-${action.name}`
                }, action.name)),
            overflowActions.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ jsx(AutopilotChatActionButton, {
                        ref: overflowButtonRef,
                        iconName: "more_vert",
                        iconSize: "16px",
                        tooltip: _({
                            id: 'autopilot-chat.message.actions.more'
                        }),
                        ariaLabel: _({
                            id: 'autopilot-chat.message.actions.more'
                        }),
                        onClick: handleOpenOverflowMenu,
                        onFocus: handleMouseEnter,
                        onMouseEnter: handleMouseEnter,
                        onMouseLeave: handleMouseLeave,
                        disableInteractiveTooltip: false,
                        "data-testid": "autopilot-chat-message-actions-overflow"
                    }),
                    /*#__PURE__*/ jsx(Menu, {
                        anchorEl: anchorEl,
                        open: overflowMenuOpen,
                        onClose: handleCloseOverflowMenu,
                        container: portalContainer,
                        action: popoverActionRef,
                        TransitionProps: {
                            onEnter: handleTransitionEnter,
                            onEntered: handleTransitionEntered
                        },
                        children: overflowActions.map((action)=>/*#__PURE__*/ jsx(MenuItem, {
                                onClick: ()=>{
                                    handleAction(action);
                                    handleCloseOverflowMenu();
                                },
                                "aria-label": action.label,
                                children: action.label
                            }, action.name))
                    })
                ]
            })
        ]
    });
}
const AutopilotChatActionsList = /*#__PURE__*/ react.memo(AutopilotChatActionsListComponent);
export { AutopilotChatActionsList };
