import React from 'react';
import ReactJson from 'react-json-view';
import classnames from 'classnames';
import { DebugDataType } from '@/utils/debug-screen';
import styles from './style.less';

const ObjectView = ({ src }) => {
  return (
    <ReactJson
      name={null}
      src={src}
      enableClipboard={false}
      displayObjectSize={false}
      displayDataTypes={false}
      style={{ background: 'none' }}
      theme="summerfruit"
      collapsed={true}
      shouldCollapse={(field) => {
        return false;
      }}
    />
  );
};

const LogContent = ({
  type,
  dispatchFrom,
  debugMsg,
}: {
  type: DebugDataType['type'];
  dispatchFrom: DebugDataType['dispatchFrom'];
  debugMsg: DebugDataType['debugMsg'];
}) => {
  if (type === 'error' && (dispatchFrom === 'filter' || dispatchFrom === 'dataRequest'))
    return (
      <div className={styles.filterErrorContainer}>
        <div>
          <span title={debugMsg?.message} className={styles.textOverflow}>
            {debugMsg?.message}
          </span>
          <br />
          <span>
            <ObjectView src={{ callbackValues: debugMsg?.callbackValues, data: debugMsg?.data }} />
          </span>
        </div>
      </div>
    );
  if (type === 'info' && dispatchFrom === 'callBack')
    return (
      <div className={classnames(styles.filterErrorContainer)}>
        <ObjectView src={{ callbackValues: debugMsg?.callbackValues }} />
      </div>
    );

  if (type === 'info' && (dispatchFrom === 'dataRequest' || dispatchFrom === 'filter'))
    return (
      <div className={classnames(styles.filterErrorContainer)}>
        <ObjectView src={{ callbackValues: debugMsg?.callbackValues, data: debugMsg?.data }} />
      </div>
    );
  return null;
};

export default LogContent;
