<template>
    <div class="editor-container pr-4 py-4" style="background: #282a36;">
        <input name="custom_schema" type="hidden" v-model="code"/>
        <div id="custom-schema"></div>
    </div>
</template>

<script>
import ace from 'ace-builds';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-dracula';

ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'));

// Main export object
export default {
    props : {
        schema : {
            type : String,
            default : null
        },
    },

    data() {
        return {
            code : null,
            editor : null
        }
    },

    mounted() {
        if (this.schema) {
            this.code = this.schema;
        }

        let element = document.getElementById("custom-schema");

        this.editor = ace.edit(element, {
            tabSize : 4,
            minLines : 10,
            maxLines : 50,
            fontSize : 13,
            theme : 'ace/theme/dracula',
            mode : 'ace/mode/json',
            enableBasicAutocompletion : true,
            enableLiveAutocompletion : true,
            highlightActiveLine : true,
            enableAutoIndent : true,
            showPrintMargin : false,
        });

        this.editor.setValue(this.code);
        this.editor.on('change', () => {
            this.code = this.editor.getValue();
        });
    },
}
</script>
