import { Button, Flex, Input, Select } from "antd";

interface ChatInputAreaProps {
  displayModelId: null | string;
  input: string;
  isLoading: boolean;
  modelOptions: Array<{ label: string; value: string }>;
  onInputChange: (value: string) => void;
  onModelChange: (value: string) => void;
  onSend: () => void;
  onStop: () => void;
}

export function ChatInputArea({
  displayModelId,
  input,
  isLoading,
  modelOptions,
  onInputChange,
  onModelChange,
  onSend,
  onStop,
}: ChatInputAreaProps) {
  return (
    <div className="chat-input-area">
      <Input.TextArea
        autoSize={{ maxRows: 6, minRows: 1 }}
        className="chat-textarea"
        disabled={isLoading}
        onChange={(e) => onInputChange(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            void onSend();
          }
        }}
        placeholder="输入消息..."
        value={input}
      />
      <Flex align="center" gap={8} justify="space-between">
        <Select
          className="chat-model-select"
          disabled={isLoading}
          onChange={onModelChange}
          options={modelOptions}
          placeholder="选择模型"
          value={displayModelId}
        />
        <Flex align="center" gap={8}>
          {isLoading ? (
            <Button
              danger
              onClick={() => {
                onStop?.();
              }}
            >
              停止
            </Button>
          ) : (
            <Button onClick={() => void onSend()} type="primary">
              发送
            </Button>
          )}
        </Flex>
      </Flex>
    </div>
  );
}