import { jsx, jsxs } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { styled } from "@mui/material";
import apollo_core, { FontVariantToken } from "@uipath/apollo-core";
import react from "react";
import { ApTypography } from "../../../ap-typography/index.js";
import { useChatService } from "../../providers/chat-service.provider.js";
import { AutopilotChatPreHookAction } from "../../service/index.js";
import { AutopilotChatActionButton } from "../common/action-button.js";
import { VisuallyHidden } from "../common/shared-controls.js";
const HeaderContainer = styled('div')(()=>({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: apollo_core.Spacing.SpacingXs
    }));
const ActionsContainer = styled('div')(()=>({
        display: 'flex',
        alignItems: 'center',
        gap: apollo_core.Spacing.SpacingXs
    }));
const AutopilotChatSettingsHeaderComponent = ({ isFullScreen, isSettingsOpen })=>{
    const { _ } = useLingui();
    const chatService = useChatService();
    const handleCloseSettings = react.useCallback(()=>{
        if (!chatService) return;
        chatService.getPreHook(AutopilotChatPreHookAction.ToggleHistory)({
            settingsOpen: isSettingsOpen
        }).then((proceed)=>{
            if (!proceed) return;
            chatService?.toggleSettings();
        });
    }, [
        chatService,
        isSettingsOpen
    ]);
    return /*#__PURE__*/ jsxs(HeaderContainer, {
        children: [
            isFullScreen && /*#__PURE__*/ jsx(ApTypography, {
                variant: FontVariantToken.fontBrandL,
                color: 'var(--color-foreground)',
                id: "settings-title",
                role: "heading",
                "aria-level": 2,
                children: _({
                    id: 'autopilot-chat.settings.title'
                })
            }),
            /*#__PURE__*/ jsx(VisuallyHidden, {
                id: "settings-heading-description",
                children: _({
                    id: "autopilot-chat.settings.heading-description"
                })
            }),
            /*#__PURE__*/ jsxs(ActionsContainer, {
                children: [
                    /*#__PURE__*/ jsx(AutopilotChatActionButton, {
                        disabled: !isSettingsOpen,
                        iconName: isFullScreen ? 'right_panel_close' : 'chevron_left',
                        onClick: handleCloseSettings,
                        tooltip: isSettingsOpen ? _({
                            id: 'autopilot-chat.settings.hide'
                        }) : '',
                        ariaLabel: isSettingsOpen ? _({
                            id: 'autopilot-chat.settings.hide'
                        }) : '',
                        ariaDescribedby: isSettingsOpen ? "settings-title settings-heading-description" : '',
                        title: isSettingsOpen ? _({
                            id: 'autopilot-chat.settings.hide'
                        }) : '',
                        ...isFullScreen && {
                            variant: 'custom'
                        },
                        "data-testid": "autopilot-chat-settings-close"
                    }),
                    !isFullScreen && /*#__PURE__*/ jsx(ApTypography, {
                        variant: FontVariantToken.fontBrandL,
                        color: 'var(--color-foreground)',
                        id: "settings-title",
                        role: "heading",
                        "aria-level": 2,
                        children: _({
                            id: 'autopilot-chat.settings.title'
                        })
                    })
                ]
            })
        ]
    });
};
const AutopilotChatSettingsHeader = /*#__PURE__*/ react.memo(AutopilotChatSettingsHeaderComponent);
export { AutopilotChatSettingsHeader };
