import React, { useState } from 'react';
import { Modal } from '@easyv/antd';
import classNames from 'classnames';
import styles from './DataTooltipModal.less';
import DataTooltip from './DataTooltip';

export default function DataTooltipModal({ inData, outData, children }) {
  const [visible, setVisible] = useState(false);
  const [active, setActive] = useState(0);
  const currentData = active === 1 ? outData : inData;
  const { type, data, fields = [] } = currentData || {};

  return (
    <>
      <span onClick={() => setVisible(true)}>{children}</span>
      <Modal className={styles.modal} visible={visible} footer={null} title={null} onCancel={() => setVisible(false)} width={322}>
        <div className={styles.tab}>
          <div
            className={classNames(styles.item, {
              [styles.active]: active === 0
            })}
            onClick={() => setActive(0)}>
            传出数据
          </div>
          <div
            className={classNames(styles.item, {
              [styles.active]: active === 1
            })}
            onClick={() => setActive(1)}>
            传入数据
          </div>
        </div>
        <DataTooltip tip={active === 1 ? '动作接收' : '事件传出'} type={type} data={data} fields={fields} />
      </Modal>
    </>
  );
}
