<script lang="ts" setup>
import { javascript } from '@codemirror/lang-javascript';
import { yaml } from '@codemirror/lang-yaml';
import { oneDark } from '@codemirror/theme-one-dark';
import { basicSetup, EditorView } from 'codemirror';
import { indentWithTab } from '@codemirror/commands';
import { keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
const emit = defineEmits(['update:value', 'change']);
const props = defineProps({
  /**禁用输入使用v-model:value时不生效 */
  value: {
    type: String,
    required: true,
  },
  /**编辑框高度 */
  height: {
    type: String,
    default: '400px',
  },
  /**缩进2空格 */
  tabSize: {
    type: Number,
    default: 2,
  },
  /**是否禁止输入 */
  disabled: {
    type: Boolean,
    default: true,
  },
  /**高亮语言 支持javascript、yaml */
  lang: {
    type: String,
    default: 'javascript',
  },
});

/**视图容器 */
const viewContainerDom = ref<HTMLElement | undefined>(undefined);
let viewContainer: EditorView | null = null;

/**高亮语言拓展 */
function fnLangExtension() {
  if (props.lang === 'yaml') {
    return yaml();
  }
  return javascript();
}

/**初始化渲染视图 */
function handleRanderView(container: HTMLElement | undefined) {
  if (!container) return;
  viewContainer = new EditorView({
    doc: props.value,
    extensions: [
      oneDark,
      basicSetup,
      keymap.of([indentWithTab]),
      fnLangExtension(),
      EditorView.editable.of(!props.disabled),
      EditorState.readOnly.of(props.disabled),
      EditorState.tabSize.of(props.tabSize),
      EditorView.updateListener.of(v => {
        if (v.docChanged) {
          const docStr = v.state.doc.toString();
          emit('change', docStr, v.state.doc);
          // 禁用时不双向绑定，防止监听重复变化数值
          if (!props.disabled) {
            emit('update:value', docStr);
          }
        }
      }),
    ],
    parent: container,
  });
}

/**监听是否value改变 */
watch(
  () => props.value,
  val => {
    // 禁用时无输入靠外部值变化改变数值
    if (props.disabled && viewContainer) {
      const docLine = viewContainer.state.doc.length;
      viewContainer.dispatch({
        changes: { from: 0, to: docLine, insert: val },
      });
    }
  }
);

onMounted(() => {
  handleRanderView(viewContainerDom.value);
});

onBeforeUnmount(() => {
  viewContainer?.destroy();
});
</script>

<template>
  <div
    ref="viewContainerDom"
    class="container"
    :style="{ '--editor-height': height }"
  ></div>
</template>

<style lang="less" scoped>
.container {
  --editor-height: 400px;
}
.container :deep(.cm-editor) {
  height: var(--editor-height);
}
</style>
