<template>
  <div class='json-editor'>
    <textarea ref='textarea'></textarea>
  </div>
</template>

<script>
  import CodeMirror from 'codemirror';
  import 'codemirror/addon/lint/lint.css';
  import 'codemirror/lib/codemirror.css';
  import 'codemirror/theme/rubyblue.css';
  require('script-loader!jsonlint');
  import 'codemirror/mode/javascript/javascript'
  import 'codemirror/addon/lint/lint'
  import 'codemirror/addon/lint/json-lint';

  export default {
    name: 'jsonEditor',
    data() {
      return {
        jsonEditor: false
      }
    },
    props: ['value'],
    watch: {
      value(value) {
        const editor_value = this.jsonEditor.getValue();
        if (value !== editor_value) {
          this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
        }
      }
    },
    mounted() {
      this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
        lineNumbers: true,
        mode: 'application/json',
        gutters: ['CodeMirror-lint-markers'],
        theme: 'rubyblue',
        lint: true
      });

      this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
      this.jsonEditor.on('change', cm => {
        this.$emit('changed', cm.getValue())
        this.$emit('input', cm.getValue())
      })
    },
    methods: {
      getValue() {
        return this.jsonEditor.getValue()
      }
    }
  }
</script>

<style>
.CodeMirror {
  height: 100%;
}

.json-editor .cm-s-rubyblue span.cm-string {
  color: #F08047;
}
</style>