import React, { useEffect, useState } from 'react';
import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
import { Typography, Form, Input } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import { useDispatch, useSelector } from 'react-redux';
import EventSelect from '@/components/FlowEditor/nodeEditors/components/EventSelect';
import { queryEventItemBySceneId } from '@/api/event';
import ParamsTable from '@/components/FlowEditor/nodeEditors/components/ParamsTable';

const EventSendEditor: React.FC<NodeEditorProps> = ({ node, nodeData, updateNodeData }) => {
  const [eventList, setEventList] = useState<any[]>();
  const { currentAppData } = useSelector(state => state.ideContainer);

  const getEventList = async () => {
    const params = {
      nodeId: node.id,
      appId: currentAppData.id,
      sceneId: currentAppData.sceneId
    };
    const res = await queryEventItemBySceneId(params);
    setEventList(res.data);
  };

  useEffect(() => {
    getEventList();
  }, []);

  return (
    <>
      <Form layout="vertical">
        <Form.Item label="节点标题">
          <Input
            value={nodeData.title || ''}
            onChange={(value) => updateNodeData('title', value)}
          />
        </Form.Item>
      </Form>
      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />事件选择</Typography.Title>
      <EventSelect
        nodeData={nodeData}
        eventList={eventList}
        type="send"
        onRefresh={getEventList}
        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
          });
        }}
      />
    </>
  );
};

export default EventSendEditor;