<template>
  <prism-editor
      class="sel-code-editor"
      v-model="content"
      :highlight="highlighter"
      line-numbers
      @blur="blurHandler"
  ></prism-editor>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css'

import prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'

const highlighter = (code) => {
  return prism.highlight(code, prism.languages.js)
}

defineOptions({
  name: 'SCodeEditor',
})
const content = ref('')
watch(() => props.modelValue, () => {
  content.value = props.modelValue
}, {
  immediate: true,
})

interface Props {
  modelValue: string
  theme?: 'monokai' | 'twilight'
  inputStyle?: any
  mode?: 'javascript' | 'html' | 'css' | 'scss' | 'json' | 'java'
  readonly?: boolean
  height?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  theme: 'monokai',
  mode: 'javascript',
  readonly: false,
  height: '300px',
})

const emits = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'change', value: any): void
  (e: 'blur', value: any): void
  (e: 'focus'): void
}>()

function blurHandler (e) {
  const value = e.target._value
  emits('blur', value)
  emits('change', value)
  emits('update:modelValue', value)
}
</script>
<style lang="scss" scoped>
.sel-code-editor {
  position: relative;
  background: #2d2d2d;
  color: #ccc;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}
</style>
