import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { connect } from 'react-redux';
import CardEventList from './EventList';
import { NodeData } from 'models/node-types';
import Tips from './Tips';
import { getUpDownNode, } from 'utils/nodes';
import { EventList, Stream, StreamList } from '@/utils/nodes.types';

export const isEfficient = (data: Stream[] = []) => {
  const list = data.reduce((all: StreamList[], cur) => {
    return all.concat(cur.list);
  }, []);
  return !!list.length;
};

function TipCard({ rightCollapsed, nodeCurrents, node,  screenId, screenName }: { node: NodeData; screenId: number, screenName: string; rightCollapsed: boolean; nodeCurrents: string[];  }) {
  const isEventList = nodeCurrents?.length === 1;

  const [eventList, setEventList] = useState<EventList>({
    downStream: [],
    upStream: []
  });
  useEffect(() => {
    if (isEventList) {
      const result = getUpDownNode({ id: nodeCurrents[0], nodeData: node });
      result && setEventList(result);
    }
  }, [node, nodeCurrents]);

  const isDownStream = isEfficient(eventList.downStream);
  const isUpStream = isEfficient(eventList.upStream);

  if (rightCollapsed) {
    return null;
  }
  return (
    <div className={styles.tipCard}>
      <div className={styles.title}>
        <span>{isEventList && (isDownStream || isUpStream) ? '相关事件列表' : '操作说明'}</span>
      </div>

      {isEventList && (isDownStream || isUpStream) ? (
        <div className={styles.box}>
          <CardEventList eventList={eventList}  screenId={screenId} screenName={screenName} />
        </div>
      ) : (
        <Tips />
      )}
    </div>
  );
}
const mapStateToProps = ({ createApp }) => {
  const { rightCollapsed } = createApp;
  return {
    rightCollapsed,
  };
};
export default connect(mapStateToProps)(TipCard);
