<script setup lang="ts">
import { computed, ref } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
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'
    ]
  )

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

  const extensions = computed( ()=> {
    return  [
        oneDark,
        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 bg-[#282C34] rounded-2xl overflow-x-auto">
    
    <codemirror
      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>
