import {Component} from '../../vues6.js'
import {uuid} from '../util.js'

const template = `
<div class="monaco-container" :id="id" style="width: 100%; height: 100%; min-height: 400px">
</div>
`
export class MonacoComponent extends Component {
    static get template() { return template }
    static get selector() { return 'cobalt-monaco' }
    static get props() { return ['initialvalue', 'syntax'] }

    constructor() {
        super()
        this.id = 'monaco-' + uuid()
        this.value = ''
    }

    vue_on_create() {
        this.value = this.initialvalue
        this.$nextTick(() => {
            this.el = document.querySelector(`#${this.id}`)
            this.editor = monaco.editor.create(this.el, {
                theme: 'vs-dark',
                value: this.value,
                language: this.syntax,
            })

            this.editor.onDidChangeModelContent(e => {
                this.value = this.editor.getValue()
                this.$emit('changed', this.value)
            })
        })
    }
}