import React from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Typography } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import ParamsTable from './ParamsTable';

const StringToJsonEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
  return (
    <>
      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输入参数</Typography.Title>
      <ParamsTable
        initialData={nodeData.parameters.dataIns || []}
        onUpdateData={(data) => {
          updateNodeData('parameters', {
            ...nodeData.parameters,
            dataIns: data
          });
        }}
      />
      <Typography.Title heading={5} style={{ marginTop: 16 }}><IconUnorderedList style={{ marginRight: 5 }} />输出参数</Typography.Title>
      <ParamsTable
        initialData={nodeData.parameters.dataOuts || []}
        onUpdateData={(data) => {
          updateNodeData('parameters', {
            ...nodeData.parameters,
            dataOuts: data
          });
        }}
      />
    </>
  );
};

export default StringToJsonEditor;