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

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

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

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

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

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

        this.editor = ace.edit(element, {
            tabSize : 4,
            minLines : 10,
            maxLines : 50,
            fontSize : 13,
            theme : 'ace/theme/dracula',
            mode : 'ace/mode/scss',
            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>
