import Vue from 'vue';

import { EditorWorker, JsonWorker, monaco } from '@lesterchn/monaco-editor';
import '@lesterchn/monaco-editor/dist/lib/style.css';

// @ts-ignore
self.MonacoEnvironment = {
  getWorker: function (_, label) {
    if (label === 'json') {
      return new JsonWorker()
    }
    return new EditorWorker()
  },
}

/** @type {Vue} */
export const QryApiJsonEditor = Vue.extend({
  name: 'QryApiJsonEditor',
  props: {
    readOnly: { type: Boolean, required: false },
    apiJson: { type: Object, default: () => ({ "$schema": `${location.origin}/apiJson/v2.json`, designConfig: {} }) },
  },
  render(h) {
    return h('div', { class: 'qry-api-json-editor' });
  },
  created() {
    // monaco.languages.registerDefinitionProvider()
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [
        {
          uri: `${location.origin}/apiJson/v2.json`,
          schema: {
            type: 'object',
            description: '查询组件/查询配置/V2',
            properties: {
              queryCode: {
                description: '查询代码(queryCode)',
                type: 'string',
              },
              queryName: {
                title: '查询名称(queryName)',
                type: 'string'
              },
              version: {
                title: '版本(version)',
                description: '保留字段',
                type: 'number',
                exclusiveMinimum: 0
              },
            },
            required: [
              "queryCode"
            ]
          }
        }
      ]
    })

  },
  mounted() {


    const $editor = monaco.editor.create(this.$el, { language: "json", fontSize: 20 });
    this.$watch(() => JSON.stringify(this.apiJson, null, 2), (value) => {
      $editor.setValue(value);
    }, { immediate: true })
  }
})