<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 '@/components/common/CodeEditorComponent.vue'

const data = ref('')
const inputFile = ref()

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

function sendValue() {
    emit('update', data.value)
}

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

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

function clear() {
    updateData('')
}

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

function readFile(file : any) {
    
    const reader = new FileReader()
    reader.onloadend = () => {
        var result = reader.result?.toString()
        if (typeof result == "string")
            sendNewValue(result)
            
    }
    reader.readAsText(file.target.files[0])
}

</script>

<template>
    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
        <div class="flex place-content-between w-full items-center">
            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
            <div class="flex space-x-2 pb-2 overflow-x-auto">
                <div class="flex items-stretch w-64">
                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                </div>
                
                <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>
        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
    </div>
</template>