<template>
    <div  class="card-body" style="padding: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;">
        <div class="card-header editor-code-title-theme" style="padding-bottom: 0px;padding-top: 6px;height: 30px;padding-left: 6px;">
            <div class="row">
                <div class="col">
                    <h6>{{name}}</h6>
                </div>
                <div class="col text-right"></div>
            </div>
        </div>
        <div  v-show="visible" style="font-size: 12px;font-family: 'Open Sans', sans-serif;"  @drop="onDrop($event)" @dragenter.prevent @dragover.prevent>
            <textarea id="editor"></textarea>
        </div>
    </div>
</template>
<script lang="ts">

import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql.js'
let htmlEditor: any;
const initEditor = (options: undefined, width: string, height: string) => {
        let textArea = document.getElementById("editor") as HTMLTextAreaElement;
        if(textArea != null)
        {
            htmlEditor = CodeMirror.fromTextArea(textArea, options);
            htmlEditor.setSize(width, height);
            htmlEditor.refresh();
        }
    };

export default {
    name: 'editor-code',
    props:{
        editorOptions:{
                default: {
                    mode: "text/x-sql",
                    autoRefresh:        true,
                    indentWithTabs:     true,
                    smartIndent:        true,
                    lineNumbers:        true,
                    lineWrapping:       true,
                    matchBrackets:      true,
                    async:              true,
                    serverSide:         true,
                    tabSize:            1,
                    autofocus:          true,
                    autoCloseBrackets: true,
                    autoCloseTags: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    showHint: true,
                }
            },
        name: { type: String, default: '' },
        visible: { type: Boolean, default: false },
        textcode: { type: String, default: '' },
        initTextCode : String,
        height: { type: String, default: '200' },
        width: { type: String },
    },
    data: () => {
        return {
            editor: null,
            isEditing: false,
        }
    },
    methods:{
        addText(text: String): void{
            let doc = htmlEditor.getDoc();
            let cursor = doc.getCursor();
            doc.replaceRange(text, cursor);
        },
        onDrop(event)
        {
            const itemList = JSON.parse(event.dataTransfer.getData('columnList'));
            let newText = '';
            if(itemList.length > 0){
                itemList.forEach((item: any) => {
                    newText += ' ' + item.text + ',';
                });
                newText = newText.slice(0,-1);
            }else{
                const item = JSON.parse(event.dataTransfer.getData('column'));
                newText = item.text;
            }
            this.addText(newText);
        }

    },
    mounted(){
        initEditor(this.editorOptions, this.width, this.height);
        htmlEditor.on('change',()=>{
            this.$emit('update:code', htmlEditor.getValue());
        });
        this.addText(this.textcode);
    },
    watch: {
        textcode: function(text: String){
            this.addText(text);
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        },
        initTextCode:function(text: String){
            htmlEditor.replaceRange("", CodeMirror.Pos(0, 0), CodeMirror.Pos(htmlEditor.lastLine() + 1, 0));
            htmlEditor.replaceRange(text, CodeMirror.Pos(htmlEditor.lastLine()));
        },
    }

}
</script>
