import React, { useState, useCallback } from 'react';
import { BaseNode } from '../BaseNode';
import { NodePort } from '../../../types/canvas';
import { useCanvasStore } from '../../../store/canvasStore';

interface TextInputNodeProps {
  id: string;
  data: {
    text?: string;
    placeholder?: string;
  };
}

export const TextInputNode: React.FC<TextInputNodeProps> = ({ id, data }) => {
  const [text, setText] = useState(data.text || '');
  const { updateNode } = useCanvasStore();

  const outputs: NodePort[] = [
    { id: 'text-output', type: 'text', label: '文本输出', position: 'output' }
  ];

  const handleTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newText = e.target.value;
    setText(newText);
    
    // 更新节点数据
    updateNode(id, {
      data: { ...data, text: newText, result: newText }
    });
  }, [id, data, updateNode]);

  return (
    <BaseNode
      id={id}
      title="文本输入"
      outputs={outputs}
    >
      <div className="space-y-2">
        <textarea
          value={text}
          onChange={handleTextChange}
          placeholder={data.placeholder || "输入文本内容..."}
          className="w-full h-20 p-2 border border-gray-300 rounded-md resize-none text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        {text && (
          <div className="text-xs text-gray-500">
            {text.length} 字符
          </div>
        )}
      </div>
    </BaseNode>
  );
};
