import * as monaco from 'monaco-editor'
import { emmetCSS, emmetHTML } from 'emmet-monaco-es'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.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'

emmetHTML(monaco, ['html'])
emmetCSS(monaco, ['css', 'scss', 'less'])

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker()
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker()
    }
    return new editorWorker()
  }
}

const MONACO_PARENT = '.code'

export function createEditor() {
  return monaco.editor.create(
    document.querySelector(MONACO_PARENT)!,
    {
      value: 'test',
      language: 'html',
      theme: 'vs-dark',
      automaticLayout: true
    }
  )
}