import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Box from '../box';
import Button from '../button';
import { KeyboardKeys, styled, useStyleConfig, vui } from '../core';
import Icon from '../icon';
import { inputColors } from '../input/consts';
import HelpText from '../input/helpText';
import { cs } from '../utils';
import { ChatInputStatus } from './chat.types';
import ChatInputButton from './chatInputButton';
const CustomTextarea = styled.textareaBox `
  border-radius: none;
  border-width: 0;
  outline: none;
  padding: 0 8px;
  resize: none;
  transition-duration: 0;
  width: 100%;
  min-height: 1.5em;
  overflow-y: hidden;

  &::placeholder {
    padding-top: 8px;
  }

  /* Disabled state styles */
  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: sandstone.79;
    border-color: sandstone.79;
  }
`;
/**
 * Displays a chat input interface.
 */
export const ChatInput = vui((props, ref) => {
    const { helpText, placeholder = 'Type your message', status = ChatInputStatus.Default, maxTextareaHeight = 120, processingMessage = 'Generating message', onNewTopicClick, onSend, onStop, ...rest } = props;
    const [value, setValue] = useState('');
    const styles = useStyleConfig('Chat', props);
    useEffect(() => {
        if (status === ChatInputStatus.Default)
            setValue('');
    }, [status]);
    const onKeyDown = (e) => {
        if (e.key === KeyboardKeys.Enter && e.ctrlKey) {
            e.stopPropagation();
            if (value?.length && status === ChatInputStatus.Default)
                onSend?.(value);
        }
        if (e.key === KeyboardKeys.Escape) {
            e.stopPropagation();
            if (status === ChatInputStatus.Processing)
                onStop?.();
        }
    };
    const handleTextareaChange = (e) => {
        const textarea = e.target;
        textarea.placeholder = '';
        // Dynamically adjust the height of the textarea
        if (textarea.scrollHeight <= maxTextareaHeight) {
            textarea.style.height = 'auto';
            textarea.style.maxHeight = 'auto';
            textarea.style.height = `${textarea.scrollHeight}px`;
            textarea.style.maxHeight = `${textarea.scrollHeight}px`;
            textarea.style.lineHeight = '2.2';
        }
        if (status === ChatInputStatus.Default)
            setValue(textarea.value);
    };
    const isDisabled = status === ChatInputStatus.Disabled;
    return (_jsxs(Box, { className: cs('vui-chat-input'), justifyContent: "space-between", ref: ref, ...styles?.input, ...rest, children: [!!onNewTopicClick && status === ChatInputStatus.Default && (_jsx(Button, { animation: "fadeUp", icon: "falPlus", mr: 1, onClick: () => onNewTopicClick?.() })), status === ChatInputStatus.Processing ? (_jsxs(Box, { borderColor: inputColors.border, borderWidth: 1, center: true, justifyContent: "flex-start", py: 0.5, w: "100%", children: [_jsx(Icon, { mx: 1, name: "fadSpinnerThird", pathFill: ['blue.40', 'blue.60'], size: "lg", variant: "spinning" }), _jsx(Box, { children: processingMessage })] })) : (_jsxs(Box, { animation: "fadeUp", border: "0", column: true, outline: "none", w: "100%", children: [_jsxs(Box, { borderColor: inputColors.border, borderWidth: 1, center: true, focusWithinRingColor: inputColors.focus, justifyContent: "flex-start", position: "relative", w: "100%", children: [_jsx(CustomTextarea, { disabled: isDisabled, onChange: handleTextareaChange, onFocus: handleTextareaChange, onKeyDown: onKeyDown, placeholder: placeholder, value: value }), _jsx(ChatInputButton, { disabled: !value?.length, h: "100%", onSend: () => {
                                    if (value?.length)
                                        onSend?.(value);
                                }, onStop: onStop, status: status })] }), !!helpText && _jsx(HelpText, { children: helpText })] }))] }));
});
ChatInput.displayName = 'ChatInput';
export default ChatInput;
//# sourceMappingURL=chatInput.js.map