import React from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import * as codemirror from 'codemirror';

// 引入全局样式
import 'codemirror/lib/codemirror.css';
// // 主题风格
import 'codemirror/theme/dracula.css';
// // 代码模式
import 'codemirror/mode/javascript/javascript';

// 添加折叠
require('codemirror/addon/fold/brace-fold.js');
require('codemirror/addon/fold/comment-fold.js');
require('codemirror/addon/fold/foldcode.js');
require('codemirror/addon/fold/foldgutter.js');
require('codemirror/addon/fold/foldgutter.css');

// 括号匹配
require('codemirror/addon/edit/matchbrackets.js');

// 自动补全
require('codemirror/addon/hint/show-hint.css');
require('codemirror/addon/hint/show-hint.js');
require('codemirror/addon/hint/anyword-hint.js');

// 代码检查错误
require('codemirror/addon/lint/json-lint.js');
require('codemirror/addon/lint/lint.css');
require('codemirror/addon/lint/lint.js');
const jsonlint = require('jsonlint-mod');
// eslint-disable-next-line dot-notation
window['jsonlint'] = jsonlint; // 不能删除，json-lint有依赖

// 引入格式化文件
const jsBeautify = require('js-beautify');

const CodeSnnipet: React.FC<{
  snippet: string;
  onChange?: (editor: codemirror.Editor, data: codemirror.EditorChange, value: string) => void;
}> = ({ snippet, onChange }) => (
  <CodeMirror
    value={snippet || '{\n\n}'}
    options={{
      mode: 'application/json',
      theme: 'dracula',
      lineNumbers: true,
      smartIndent: true,
      tabSize: 2,
      lint: true,
      foldGutter: true,
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    }}
    editorDidMount={(editor, data) => {
      // 格式化
      editor.setValue(jsBeautify(data));
    }}
    onChange={onChange}
  />
);

export default CodeSnnipet;