<script setup>
import {onMounted, onUnmounted, ref, defineEmits} from "vue"
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

self.MonacoEnvironment = {
    getWorker(_, label) {
        switch (label) {
            case 'json':
                return new jsonWorker();
            case 'css':
            case 'scss':
            case 'less':
                return new cssWorker();
            case 'html':
            case 'handlebars':
            case 'razor':
                return new htmlWorker();
            case 'typescript':
            case 'javascript':
                return new tsWorker();
            case 'yaml':
                return new yamlWorker();
            default:
                return new editorWorker()
        }
    }
};

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

const props = defineProps({
    modelValue: {
        type: String,
        default: '{"foo":"bar"}'
    },
});

const emit = defineEmits(['update:modelValue']);

const container = ref()

let instance = null

onMounted(() => {
    instance = monaco.editor.create(container.value, {
        model: monaco.editor.createModel(props.modelValue, 'json'),
        tabSize: 2,
    })

    instance.onDidChangeModelContent(() => {
        emit('update:modelValue', instance.getValue());
    });
})

onUnmounted(() => {
    instance?.dispose()
})
</script>

<template>
    <div ref="container"></div>
</template>