require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
window.code = '';

let proxy = URL.createObjectURL(new Blob([`
    self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
    };
    importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {

    let init_lang = 'python';
    /** @type {string[]} */
    const supported_langs = get_langs();

    let editor = monaco.editor.create(document.getElementById('container'), {
        value: '# put code here',
        language: init_lang,
        theme: 'vs-dark' 
    });

    editor.addListener('didType', () => {
        window.code = editor.getValue();
    });

    monaco.languages.getLanguages().forEach(x => {
        if (supported_langs.indexOf(x.id) === -1) return
        
        let el = document.createElement('option');
        el.id = x.id;
        el.innerText = x.id;

        if (x.id == init_lang) el.selected = true;

        document.getElementById('lang').appendChild(el);
    })

    document.getElementById('lang').onchange = (e) => {
        e = e.target;
        monaco.editor.setModelLanguage(editor.getModel(), e.options[e.selectedIndex].id)
    }

    document.getElementById('run').onclick = (e) => {
        executeCode(window.code, editor.getModel().getLanguageIdentifier().language)
    }
});