import React from 'react';
import AceEditor from '@easyv/react-ace';
import { filterData } from 'utils/convert';
import styles from './filter-test.less';

function Preview({ visible, originData, content, onClose }) {
  if (!visible) {
    return null;
  }

  const resultData = filterData({ data: originData, filters: [{ content: content }] });

  return (
    <div className={styles.container}>
      <div className={styles.wrap}>
        <i className="icon iconfont icon-btn_close" onClick={onClose} />
        <div className={styles.title}>过滤器输入数据：</div>
        <AceEditor
          className="dark"
          mode="json"
          theme="twilight"
          width="100%"
          height="326px"
          readOnly={true}
          name="responseData1"
          tabSize={2}
          value={JSON.stringify(originData, null, 2)}
          showGutter={true}
          editorProps={{ $blockScrolling: true }}
          setOptions={{ wrap: true }}
        />
        <div className={styles.title}>过滤器运行结果：</div>
        <AceEditor
          className="dark"
          mode="json"
          theme="twilight"
          width="100%"
          height="326px"
          readOnly={true}
          name="responseData2"
          tabSize={2}
          value={JSON.stringify(resultData, null, 2)}
          showGutter={true}
          editorProps={{ $blockScrolling: true }}
          setOptions={{ wrap: true }}
        />
      </div>
    </div>
  );
}

export default Preview;
