import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import './Prompt.scss';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
import classNames from 'classnames';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
const Prompt = forwardRef(({ width = 300, height = 40, iconHeight = 16, iconWidth = 16, placeholder = 'Enter text', iconName = 'right_arrow_filled_icon', iconPosition = 'left', borderRadius = 4, autoFocus = false, value = '', iconColor = 'var(--brand-color)', tooltipTitle = 'send', submitPrompt, onPromptChange, onBlur, onFocus, }) => {
    const containerRef = useRef(null);
    useKeyboardActions([{ key: 'Enter', action: () => handleKeyBoard('Enter') }], containerRef);
    const handleKeyBoard = (key) => {
        if (key === 'Enter') {
            if (value) {
                submitPrompt?.(value.trim());
            }
        }
    };
    return (_jsxs("div", { className: classNames('ff-prompt-container', {
            'icon-left': iconPosition === 'left',
            'icon-right': iconPosition !== 'left',
        }), style: {
            width: `${width}px`,
            height: `${height}px`,
            borderRadius,
        }, ref: containerRef, children: [_jsx(Tooltip, { placement: "top", title: tooltipTitle, children: _jsx(Icon, { name: iconName, className: "ff-prompt-icon", height: iconHeight, width: iconWidth, onClick: submitPrompt, color: iconColor, disabled: checkEmpty(value) }) }), _jsx("input", { className: "ff-prompt-input", type: "text", placeholder: placeholder, autoFocus: autoFocus, onChange: onPromptChange, onFocus: onFocus, onBlur: onBlur, value: value })] }));
});
export default Prompt;
//# sourceMappingURL=Prompt.js.map