import { React, h, Box, Text, TextInput } from './plugins.js';

interface IInputAreaProps {
  disabled: boolean;
  onSubmit: (text: string) => void;
}

export function InputArea({ disabled, onSubmit }: IInputAreaProps): React.ReactElement {
  const [value, setValue] = React.useState('');

  const handleSubmit = (text: string) => {
    if (!text.trim()) return;
    onSubmit(text.trim());
    setValue('');
  };

  return h(
    Box,
    { borderStyle: 'single' as const, borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1 },
    h(Text, { bold: true, color: disabled ? 'gray' : 'cyan' }, '> '),
    h(TextInput, {
      value,
      onChange: setValue,
      onSubmit: handleSubmit,
      placeholder: disabled ? 'Waiting for response...' : 'Type a message...',
      focus: !disabled,
    }),
  );
}