import React from 'react';
import AceEditorBox from '../AceEditorBox';
import styles from './DataTooltip.less';

interface DataTooltipProps {
  type: string;
  tip?: string;
  fields: {
    name: string;
    type: string;
    desc: string;
  }[];
  data: any;
}

export default function DataTooltip({ tip = '事件传出', type, fields = [], data = '' }: DataTooltipProps) {
  return (
    <div className={styles.container}>
      <div className={styles.title}>数据字段参考</div>
      <div className={styles.desc}>
        {tip}的数据为{type}类型, 包含以下字段
      </div>
      <div className={styles.table}>
        <div className={styles.tableHeader}>
          <div>字段</div>
          <div>类型</div>
          <div>说明</div>
        </div>
        {fields.map((d, i) => (
          <div key={i} className={styles.row}>
            <div title={d.name}>{d.name}</div>
            <div title={d.type}>{d.type}</div>
            <div title={d.desc}>{d.desc}</div>
          </div>
        ))}
      </div>
      <div className={styles.title}>数据示例</div>

      <div>
        <AceEditorBox
          className="dark"
          mode="json"
          theme="twilight"
          width="282px"
          height="210px"
          readOnly={true}
          name="responseData"
          tabSize={2}
          value={JSON.stringify(data, null, 2)}
          showGutter={true}
          editorProps={{ $blockScrolling: true }}
          setOptions={{ wrap: true }}
          hideFullScreen={true}
        />
      </div>
    </div>
  );
}
