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';
import ConditionsTable from '@/components/FlowEditor/nodeEditors/components/ConditionsTable';

const SwitchEditor: 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
          });
        }}
        type="switch"
      />
    </>
  );
};

export default SwitchEditor;