<script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue';
import CodeEditor from '../CodeEditorComponent.vue';

const data = ref('')

const props = defineProps(
    {
        stylizedName: {type: String, required: true},
        data: {type: String},
    }
)
const emit = defineEmits(['update'])

function sendValue() {
    console.log("input works")
    emit('update', data.value)
}

function sendNewValue(newValue : string) {
    data.value = newValue
    emit('update', data.value)
}

function updateData(newData: string) {
    data.value = newData;
    sendValue();
}

function clear() {
    updateData('');
}

function canBeFormatted() {
    return props.stylizedName.toLowerCase() == 'xml' || 
           props.stylizedName.toLowerCase() == 'xsd' || 
           props.stylizedName.toLowerCase() == 'xslt';
}

</script>

<template>
    <div class="flex flex-col w-full h-1/2">
        <div class="flex place-content-between w-full pr-2 items-center m-2">
            <span class="dark:text-white">{{ stylizedName }}</span>
            <div class="flex space-x-2">
                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                <button class="tool-button" @click="clear">Clear</button>
            </div>
        </div>
        <!-- <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea> -->
        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
    </div>
</template>