import { jsx, jsxs } from "react/jsx-runtime";
import { styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import react, { useEffect, useRef } from "react";
import react_focus_lock from "react-focus-lock";
import { useChatService } from "../../providers/chat-service.provider.js";
import { useChatState } from "../../providers/chat-state-provider.js";
import { CHAT_DRAWER_WIDTH_FULL_SCREEN } from "../../service/index.js";
import { AutopilotChatSettingsHeader } from "./chat-settings-header.js";
const ChatSettingsContainer = styled('div')(({ isFullScreen })=>({
        display: 'flex',
        flexDirection: 'column',
        gap: apollo_core.Spacing.SpacingL,
        backgroundColor: 'var(--color-background-secondary)',
        height: '100%',
        zIndex: 1,
        boxSizing: 'border-box',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        width: 'var(--settings-width)',
        paddingLeft: 'var(--settings-padding-left)',
        paddingRight: 'var(--settings-padding-right)',
        paddingTop: apollo_core.Spacing.SpacingBase,
        paddingBottom: apollo_core.Spacing.SpacingBase,
        transition: 'width 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease',
        ...isFullScreen ? {
            borderTopLeftRadius: apollo_core.Spacing.SpacingXs
        } : {
            position: 'absolute',
            right: 0
        },
        '& .chat-settings-content': {
            outline: 'none',
            flex: 1,
            overflowY: 'auto',
            marginRight: `calc(-${apollo_core.Spacing.SpacingBase})`,
            paddingRight: apollo_core.Spacing.SpacingBase
        }
    }));
const AutopilotChatSettings = ({ open, isFullScreen })=>{
    const containerRef = useRef(null);
    const chatService = useChatService();
    const { settingsOpen } = useChatState();
    const cssVars = react.useMemo(()=>{
        const width = open ? isFullScreen ? `calc(${CHAT_DRAWER_WIDTH_FULL_SCREEN}px + 2 * ${apollo_core.Spacing.SpacingBase})` : '100%' : '0';
        const padding = open ? apollo_core.Spacing.SpacingBase : '0';
        return {
            '--settings-width': width,
            '--settings-padding-left': padding,
            '--settings-padding-right': padding
        };
    }, [
        open,
        isFullScreen
    ]);
    useEffect(()=>{
        if (!containerRef.current || !chatService) return;
        const config = chatService.getConfig();
        const settingsRenderer = config.settingsRenderer;
        if (!settingsRenderer) return;
        containerRef.current.innerHTML = '';
        if (!settingsOpen) return;
        try {
            settingsRenderer(containerRef.current);
        } catch (error) {
            return;
        }
    }, [
        chatService,
        settingsOpen
    ]);
    return /*#__PURE__*/ jsx(react_focus_lock, {
        disabled: !open || !settingsOpen || isFullScreen,
        returnFocus: false,
        children: /*#__PURE__*/ jsxs(ChatSettingsContainer, {
            isOpen: open,
            isFullScreen: isFullScreen,
            style: cssVars,
            children: [
                /*#__PURE__*/ jsx(AutopilotChatSettingsHeader, {
                    isFullScreen: isFullScreen,
                    isSettingsOpen: settingsOpen
                }),
                /*#__PURE__*/ jsx("div", {
                    ref: containerRef,
                    className: "chat-settings-content"
                })
            ]
        })
    });
};
const chat_settings = AutopilotChatSettings;
export { AutopilotChatSettings, chat_settings as default };
