<template>
  <div ref="root" style="position: absolute; font-size: 14px;" />
</template>

<script>
const DEFAULT_OPTIONS = {
  useWrapMode: false,
  tabSize: 2
}

export default {
  props: {
    value: {
      type: String
    },
    type: {
      type: String,
      default: 'javascript'
    },
    options: {
      type: Object,
      default: () => {
        return DEFAULT_OPTIONS
      }
    }
  },
  data () {
    return {
      editor: undefined
    }
  },
  mounted () {
    let finalOptions = {
      ...DEFAULT_OPTIONS,
      ...this.options
    }
    this.editor = window.ace.edit(this.$el);
    this.editor.getSession().setMode('ace/mode/' + this.type);
    this.editor.session.setTabSize(finalOptions.tabSize || 2);
    this.editor.session.setUseWrapMode(finalOptions.useWrapMode || false);
    this.editor.getSession().on('change', (e) => {
      this.$emit('input', this.editor.getValue());
    });
    this.editor.setReadOnly(finalOptions.readOnly);
    if (this.value) this.editor.setValue(this.value);
    this.editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    });
  },
  destoryed () {
    this.editor.destroy();
    this.editor.container.remove();
    this.editor = undefined;
  },
  watch: {
    value: {
      handler (newValue) {
        if (this.editor && this.editor.getValue() !== newValue) {
          this.editor.setValue(newValue);
          this.editor.moveCursorTo(0, 0);
        }
      },
      immediate: true
    }
  }
}
</script>

<style>
</style>
