import { jsx, jsxs } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import react from "react";
import { ApTypography } from "../../../../ap-typography/index.js";
import { useChatService } from "../../../providers/chat-service.provider.js";
import { useChatState } from "../../../providers/chat-state-provider.js";
import { AutopilotChatInternalEvent } from "../../../service/index.js";
const SuggestionList = styled('div')(({ disableAnimation, gap })=>({
        display: 'flex',
        flexDirection: 'column',
        gap,
        animation: disableAnimation ? 'none' : 'popUpFromBottom 0.3s ease-out',
        maxWidth: "100%",
        '@keyframes popUpFromBottom': {
            '0%': {
                opacity: 0,
                transform: 'translateY(20px)'
            },
            '100%': {
                opacity: 1,
                transform: 'translateY(0)'
            }
        }
    }));
const Suggestion = styled('button')(({ padding })=>({
        backgroundColor: 'transparent',
        outlineColor: 'var(--color-focus-indicator)',
        display: 'flex',
        alignItems: 'center',
        textAlign: 'left',
        width: 'fit-content',
        gap: apollo_core.Spacing.SpacingXs,
        padding,
        borderRadius: apollo_core.Border.BorderRadiusL,
        border: "1px solid var(--color-border-disabled)",
        cursor: 'pointer',
        '&:hover': {
            backgroundColor: 'var(--color-background-secondary)',
            borderColor: 'var(--color-border)'
        }
    }));
const Title = styled('div')(()=>({
        marginBottom: apollo_core.Spacing.SpacingMicro
    }));
function AutopilotChatSuggestionsComponent({ includeTitle, sendOnClick, suggestions, disableAnimation }) {
    const { _ } = useLingui();
    const chatService = useChatService();
    const { spacing } = useChatState();
    const handleSuggestionClick = react.useCallback((_event, suggestion)=>{
        if (sendOnClick) chatService.sendRequest({
            content: suggestion.prompt
        });
        else chatService.setPrompt(suggestion.prompt);
        chatService.__internalService__.publish(AutopilotChatInternalEvent.SetInputFocused, true);
    }, [
        chatService,
        sendOnClick
    ]);
    const handleSuggestionKeyDown = react.useCallback((event, suggestion)=>{
        if ('Enter' === event.key || ' ' === event.key) {
            event.preventDefault();
            handleSuggestionClick(event, suggestion);
        }
    }, [
        handleSuggestionClick
    ]);
    return /*#__PURE__*/ jsxs(SuggestionList, {
        disableAnimation: disableAnimation,
        gap: spacing.suggestionSpacing,
        children: [
            includeTitle && /*#__PURE__*/ jsx(Title, {
                children: /*#__PURE__*/ jsx(ApTypography, {
                    variant: spacing.primaryBoldFontToken,
                    color: 'var(--color-foreground-emp)',
                    children: _({
                        id: 'autopilot-chat.message.suggestions-title'
                    })
                })
            }),
            suggestions.map((suggestion, index)=>/*#__PURE__*/ jsx(Suggestion, {
                    onKeyDown: (event)=>handleSuggestionKeyDown(event, suggestion),
                    onClick: (event)=>handleSuggestionClick(event, suggestion),
                    tabIndex: 0,
                    "data-cy": `autopilot-chat-suggestion-nth-${index}`,
                    padding: spacing.suggestionPadding,
                    children: /*#__PURE__*/ jsx(ApTypography, {
                        color: 'var(--color-foreground)',
                        variant: spacing.suggestionFontToken,
                        children: suggestion.label
                    })
                }, suggestion.label))
        ]
    });
}
const AutopilotChatSuggestions = /*#__PURE__*/ react.memo(AutopilotChatSuggestionsComponent);
export { AutopilotChatSuggestions };
