import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { ArrowRight, ArrowRotateLeft, ThumbsDown, ThumbsUp } from '@gravity-ui/icons';
import { ActionTooltip, Alert, Button, Icon, TextInput } from '@gravity-ui/uikit';
import { cn } from "../../../../classname.js";
import { i18n } from "../../../../i18n/gpt/dialog/index.js";
import gptIcon from "../../../../icons/GPT.js";
import { useAutoFocus } from "../../../../react-utils/useAutoFocus.js";
import { ErrorScreen } from "../ErrorScreen/ErrorScreen.js";
import { IconRefuge } from "../IconRefuge/IconRefuge.js";
import { PresetList } from "../PresetList/PresetList.js";
import { gptHotKeys } from "../constants.js";
import { useGpt } from "../hooks/useGpt.js";
import { useGptHotKeys } from "../hooks/useGptHotKeys.js";
import { getAlertGptInfo, getDisableReplaceButtonText, getInputPlaceHolder } from "../utils.js";
import { LoadingScreen } from "./LoadingScreen/LoadingScreen.js";
import "./GptDialog.css";
export const cnGptDialog = cn('gpt-dialog');
export const GptDialog = ({ markup, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onPromptPresetClick, onTryAgain, onApplyResult, onClose, onLike, onDislike, onUpdate, gptAlertProps, }) => {
    const { answer, customPrompt, loading, mode, feedbackType, feedbackTypeLoading, handleLike, handleDislike, handleCustomPromptUpdate, handleCustomPromptKeyPress, handleCustomPromptApply, handlePresetClick, handleTryAgain, handleFreshStart, handleApplyResult, showAnswer, showError, showAnswerActions, showTryAgainButton, } = useGpt({
        markup,
        promptPresets,
        onLike,
        onDislike,
        onCustomPromptApply,
        onPromptPresetClick,
        onTryAgain,
        onApplyResult,
        onUpdate,
    });
    const gptAlert = gptAlertProps;
    const customPromptContainerRef = useRef(null);
    const [showedGptAlert, setShowedGptAlert] = useState(gptAlert?.showedGptAlert);
    const { alertMessage, alertTheme, alertClassName } = getAlertGptInfo(gptAlert);
    const onCloseAlert = useCallback(() => {
        if (gptAlert) {
            gptAlert.showedGptAlert = false;
        }
        gptAlert?.onCloseGptAlert?.();
        setShowedGptAlert(false);
    }, [gptAlert]);
    useAutoFocus(customPromptContainerRef, [showAnswer]);
    useGptHotKeys(gptHotKeys.tryAgainGpt, handleTryAgain);
    useGptHotKeys(gptHotKeys.freshStartGpt, handleFreshStart);
    useGptHotKeys(gptHotKeys.applyResultGpt, handleApplyResult);
    const replaceButtonText = getDisableReplaceButtonText(disablePromptPresets);
    const inputPlaceholderText = getInputPlaceHolder(disablePromptPresets, disabledPromptPlaceholder, customPromptPlaceholder);
    const tryAgainButton = (_jsx(ActionTooltip, { hotkey: gptHotKeys.tryAgainGpt, title: i18n('try-again'), children: _jsxs(Button, { className: cnGptDialog('try-again-button'), view: "normal", size: "m", onClick: handleTryAgain, children: [_jsx(Icon, { data: ArrowRotateLeft, size: 16 }), i18n('try-again')] }) }));
    let content = null;
    if (loading) {
        content = _jsx(LoadingScreen, {});
    }
    else if (showError) {
        content = _jsx(ErrorScreen, { onRetry: handleTryAgain, onStartAgain: handleFreshStart });
    }
    else {
        content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: cnGptDialog('header'), children: [_jsxs("div", { className: cnGptDialog('header-top'), children: [_jsx(IconRefuge, { containerClassName: cnGptDialog('gpt-icon'), data: gptIcon, refugeSize: 28, size: 16 }), (mode === 'only-custom' || mode === 'custom-and-presets') &&
                                    (showAnswer ? (_jsx("span", { className: cnGptDialog('answer-title'), children: i18n('answer-title') })) : (_jsxs("div", { className: cnGptDialog('custom-prompt'), children: [_jsx(TextInput, { controlRef: customPromptContainerRef, view: "clear", size: "m", className: cnGptDialog('custom-prompt-input'), placeholder: inputPlaceholderText, onKeyPress: handleCustomPromptKeyPress, onUpdate: handleCustomPromptUpdate }), _jsx(Button, { className: cnGptDialog('custom-prompt-ask-button'), view: "normal", size: "s", disabled: !customPrompt, onClick: handleCustomPromptApply, children: _jsx(Icon, { data: ArrowRight, size: 16 }) })] }))), mode === 'only-presets' && (_jsx("div", { className: cnGptDialog('alone-presets'), children: _jsx("span", { className: cnGptDialog('alone-presets-text'), children: i18n('only-presets-title') }) }))] }), (mode === 'custom-and-presets' || mode === 'only-presets') &&
                            ((showTryAgainButton && (_jsxs("div", { className: cnGptDialog('header-bottom'), children: [tryAgainButton, _jsx(ActionTooltip, { title: i18n('fresh-start-button'), hotkey: gptHotKeys.freshStartGpt, children: _jsx(Button, { className: cnGptDialog('back-to-start'), view: "normal", size: "m", onClick: handleFreshStart, children: i18n('fresh-start-button') }) })] }))) ||
                                (!disablePromptPresets && (_jsx("div", { className: cnGptDialog('header-bottom'), children: _jsx(PresetList, { disablePromptPresets: disablePromptPresets, promptPresets: promptPresets, onPresetClick: handlePresetClick }) }))) ||
                                (disablePromptPresets && showedGptAlert && (_jsx(Alert, { theme: alertTheme, message: alertMessage, align: "center", className: cnGptDialog('description-alert', alertClassName), onClose: onCloseAlert }))))] }), showAnswer && (_jsxs(_Fragment, { children: [_jsx("div", { className: cnGptDialog('body'), children: _jsx("div", { className: cnGptDialog('answer'), children: answerRender(answer) }) }), _jsxs("div", { className: cnGptDialog('footer'), children: [showAnswerActions && (_jsxs("div", { className: cnGptDialog('answer-actions'), children: [_jsx(Button, { className: cnGptDialog('like-button'), view: "normal", size: "m", onClick: handleLike, selected: feedbackType === 'like', loading: feedbackTypeLoading === 'like', children: _jsx(Icon, { data: ThumbsUp, size: 16 }) }), _jsx(Button, { className: cnGptDialog('dislike-button'), view: "normal", size: "m", onClick: handleDislike, selected: feedbackType === 'dislike', loading: feedbackTypeLoading === 'dislike', children: _jsx(Icon, { data: ThumbsDown, size: 16 }) }), feedbackType && (_jsx("span", { className: cnGptDialog('feedback-message'), children: i18n('feedback-message') }))] })), _jsx(ActionTooltip, { title: i18n('close-button'), hotkey: gptHotKeys.closeGpt, children: _jsx(Button, { className: cnGptDialog('close-button'), view: "flat", size: "m", onClick: onClose, children: i18n('close-button') }) }), _jsx(ActionTooltip, { title: replaceButtonText, hotkey: gptHotKeys.applyResultGpt, children: _jsx(Button, { className: cnGptDialog('apply-button'), view: "action", size: "m", onClick: handleApplyResult, children: replaceButtonText }) })] })] }))] }));
    }
    return _jsxs("div", { className: cnGptDialog(), children: [" ", content, " "] });
};
//# sourceMappingURL=GptDialog.js.map
