import React, { useState } 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 CronPicker from '@/components/CronPicker';

const CycleEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
  const [cron, setCron] = useState('0 0 9 * * ?');

  return (
    <>
      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />周期参数</Typography.Title>
      <CronPicker
        value={cron}
        onChange={setCron}
        onUpdateData={(data) => {
          updateNodeData('component', {
            ...data
          });
        }} />
      <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 }} />输出参数</Typography.Title>
      <ParamsTable
        initialData={nodeData.parameters.dataOuts || []}
        onUpdateData={(data) => {
          updateNodeData('parameters', {
            ...nodeData.parameters,
            dataOuts: data
          });
        }}
      />
    </>
  );
};

export default CycleEditor;