import React, { useState, useMemo, useEffect, Fragment } from 'react'
import { UnControlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
import 'codemirror/theme/solarized.css'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/selection/active-line'
// 折叠行
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
// 代码补全
import 'codemirror/addon/hint/show-hint.css' // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/anyword-hint.js' // end
// 设置语言
import 'codemirror/mode/javascript/javascript'

export default function CodeMirrorInput (props) {
  const { value, onChange, onBeforeChange } = props
  const [code, setCode] = useState(value)
  return (
    <CodeMirror
      value={code}
      options={{
        lineNumbers: true,
        mode: { name: 'text/javascript' },
        extraKeys: { Ctrl: 'autocomplete' },
        styleActiveLine: true,
        lineWrapping: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
      }}
      onChange={(editor, data, value) => onChange(editor, data, value)}
    />
  )
}
