import React from 'react';
import styles from './PreviewContent.less';
import { CloseOutlined } from '@easyv/react-icons';
import AceEditor from '@easyv/react-ace';
import { connect } from 'react-redux';
import { containersFilterResult } from 'utils/containers';

function Preview({
  previewContent = {},
  filtersAll,
  onChange,
  callbackValues
}: {
  callbackValues: {
    [x: string]: (string | number)[];
  };
  onChange: (x) => void;
  previewContent: any;
  filtersAll: any;
}) {
  const { id, filters, name } = previewContent;

  const previewData =
    id &&
    containersFilterResult({
      container: previewContent,
      currentFilters: filters.map((d) => filtersAll.find((x) => x.id === d.id)).filter((d) => d),
      callbackValues
    });

  if (!id) {
    return null;
  }

  return (
    <div className={styles.preview}>
      <div className={styles.title}>
        <span>数据容器响应结果(只读)——{name}</span>
        <span className={styles.close} onClick={onChange}>
          <CloseOutlined />
        </span>
      </div>
      <div className={styles.box}>
        <AceEditor
          className="dark"
          mode="json"
          theme="twilight"
          readOnly={true}
          name="Preview"
          tabSize={2}
          width="479px"
          height="100%"
          showGutter={true}
          editorProps={{ $blockScrolling: true }}
          setOptions={{ wrap: true }}
          value={JSON.stringify(previewData, null, 2)}
        />
      </div>
    </div>
  );
}
const mapStateToProps = ({ callback, filters }) => {
  return {
    callbackValues: callback.callbackValues,
    filtersAll: filters.list
  };
};
export default connect(mapStateToProps)(Preview);
