<template>
  <div class="code-editor-container" :style="{ height: height }">
    <div ref="monacoContainer" class="monaco-editor-container"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor'

export default {
  name: 'CodeEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'cpp'
    },
    theme: {
      type: String,
      default: 'vs-dark'
    },
    height: {
      type: String,
      default: '400px'
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null
    }
  },
  watch: {
    value(newValue) {
      if (this.editor && newValue !== this.editor.getValue()) {
        this.editor.setValue(newValue)
      }
    },
    language(newLanguage) {
      if (this.editor) {
        monaco.editor.setModelLanguage(this.editor.getModel(), newLanguage)
      }
    },
    theme(newTheme) {
      if (this.editor) {
        monaco.editor.setTheme(newTheme)
      }
    }
  },
  mounted() {
    this.initMonaco()
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.dispose()
    }
  },
  methods: {
    initMonaco() {
      this.editor = monaco.editor.create(this.$refs.monacoContainer, {
        value: this.value,
        language: this.language,
        theme: this.theme,
        automaticLayout: true,
        minimap: { enabled: true },
        scrollBeyondLastLine: false,
        readOnly: this.readOnly,
        fontSize: 14,
        tabSize: 2
      })

      this.editor.onDidChangeModelContent(() => {
        const value = this.editor.getValue()
        this.$emit('input', value)
        this.$emit('change', value)
      })
    }
  }
}
</script>

<style scoped>
.code-editor-container {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.monaco-editor-container {
  width: 100%;
  height: 100%;
}
</style> 