import React, { useEffect, 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 EventSelect from './EventSelect';
import { useDispatch, useSelector } from 'react-redux';
import { queryEventItemBySceneId } from '@/api/event';

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

  const getEventList = async () => {
    const res = await queryEventItemBySceneId(currentAppData.sceneId);
    setEventList(res.data);
  };

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

  return (
    <>
      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />事件选择</Typography.Title>
      <EventSelect
        eventList={eventList}
        type="send"
        onRefresh={getEventList}
        onUpdateData={(data) => {
          updateNodeData('component', {
            ...data
          });
        }}></EventSelect>
    </>
  );
};

export default EventListenEditor;