import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';
import 'codemirror/theme/xq-light.css';
import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
// import 'codemirror/mode/css/css';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/scroll/simplescrollbars.js';
import 'codemirror/addon/selection/active-line';
import 'codemirror/mode/javascript/javascript';

type CodeMirrorProps = {
  value: any;
  onChange: (val: any) => void;
};

/**
 * 代码块
 *
 * @param value
 * @param onChange
 * @constructor
 */
const CodeMirrorSetting: React.FC<CodeMirrorProps> = ({ value, onChange }) => {
  return (
    <CodeMirror
      value={value}
      onBeforeChange={(editor, data, val) => {
        onChange(val);
      }}
      options={{
        // lineNumbers: true, //显示行号
        // mode: 'javascript', //语言
        mode: 'application/json',
        autofocus: false, //自动获取焦点
        styleActiveLine: true, //光标代码高亮
        theme: 'xq-light', //主题
        // scrollbarStyle: 'overlay',
        smartIndent: true,
        lineWrapping: false, //代码自动换行
        foldGutter: true,
        autoCloseBrackets: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirrorfoldgutter'], //end
        lint: true,
        indentWithTabs: true,
      }}
    />
  );
};

export default CodeMirrorSetting;