<script setup lang="ts">
import { onBeforeUpdate, inject } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { espresso } from 'thememirror';
import {xml} from '@codemirror/lang-xml'
import {json} from '@codemirror/lang-json'
import {html} from '@codemirror/lang-html'

const props= defineProps({
  code : {
      type: String,
      required: true
  },
  config: {
      type: Object,
      required: true
    },
})

const emit = defineEmits(
  [
    'update:updatedCode'
  ]
)

const theme : string = inject('theme')!;
let extensions = parseExtensions();

onBeforeUpdate( () => { extensions = parseExtensions(); } )

function dataUpdated(newData:String){
  emit('update:updatedCode',newData)
}

function selectTheme() {
  if (isDarkModeSet())
    return oneDark;
  else
    return espresso;
}

function isDarkModeSet(){
  return localStorage.theme == "dark";
}

function parseExtensions(){
  return  [
      selectTheme(),
      parseLanguage(props.config.language),
  ]
}

function parseLanguage(name: String){
  switch(name.toUpperCase()){
    case "JSON": {
      return json();
    }
    case "HTML": {
      return html();
    }
    default: {
      return xml();
    }
  }
}




</script>

<template>
  <div class="editor w-full h-full rounded-2xl overflow-x-auto">
    
    <codemirror
      :key="theme"
      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
      :model-value="code"
      @update:model-value="dataUpdated"
      :extensions="extensions"
      :disabled="config.disabled"
      />
    
  </div>
</template>
