import React, {Component} from 'react'
import CodeMirror from 'react-codemirror'
import auto_bind from 'common/auto_bind'
require('codemirror/lib/codemirror.css')
require('codemirror/mode/javascript/javascript')
require('codemirror/keymap/sublime')
require('codemirror/theme/base16-light.css')

export default class CodeEditor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: props.value || default_input,
    }
    auto_bind(this)
  }

  on_change(value) {
    this.setState({value})
  }

  on_focus_change() {
    if (this.state.value != this.props.value) {
      this.props.on_change(this.state.value)
    }
  }

  render() {
    return (
      <CodeMirror
        value={this.state.value || ""}
        onChange={this.on_change}
        onFocusChange={this.on_focus_change}
        options={{
          lineNumbers: true,
          mode: 'javascript',
          theme: 'base16-light',
          keyMap: 'sublime',
          tabSize: 2,
        }}
      />
    )
  }
}

const default_input = `function (o) {
  return ""
}`