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


const xml = ref('');
const inputFile = ref()

const errorOccurred = ref(false);

function setTextFieldValue(data: string) {
    xml.value = data
}

function format(formattedXml: any) {
    xml.value = formattedXml.result;
}

function setErrorOccurred(occurred: boolean) {
    errorOccurred.value = occurred
}

function setExample(data: string) {
    inputFile.value.value = ''
    setTextFieldValue(data)
}

function clear() {
    xml.value = '';
    errorOccurred.value = false
    inputFile.value.value = ''
}

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

</script>

<template>
    <div id="layout" class="flex flex-col w-full h-full gap-4">
        <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
            <span class="dark:text-slate-100">XML Formatter</span>
            <div class="flex flex-wrap gap-2 justify-center">
                <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="XML" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                <button class="tool-button" @click="clear()">Clear</button>
                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
            </div>
        </div>
        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
    </div>
</template>