import React, { useEffect, useState } from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Typography, Slider } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import ParamsTable from '@/components/FlowEditor/nodeEditors/components/ParamsTable';
import ConditionsTable from '@/components/FlowEditor/nodeEditors/components/ConditionsTable';

const LoopEditor: 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}>
        <IconUnorderedList style={{ marginRight: 5, marginTop: 20 }} />
        跳出循环条件
      </Typography.Title>
      <ConditionsTable
        initialData={nodeData.component || {}}
        nodeData={nodeData || null}
        onUpdateData={(data) => {
          updateNodeData('component', {
            ...data.component
          });
          updateNodeData('parameters', {
            ...nodeData.parameters,
            apiOuts: data.parameters.apiOuts
          });
        }} />
    </>
  );
};

export default LoopEditor;