<script setup lang="ts">
import { onMounted, ref } from 'vue';
import CodeEditor from '../CodeEditorComponent.vue';


const props = defineProps(
    {
        tool: {type: String, required: true},
        xml: {type: String},
        query: {type: String}
    }
)

const result = ref('');

var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);

const allVersions = ["1.0", "2.0", "3.0", "3.1"];
var versionsForCurrentEngine = ref([""]);

const engine = ref('');
const version = ref('');


onMounted(() => {
    changeAvailableEngines();
    changeAvailableVersions();
})

function changeAvailableEngines() {
    if (props.tool == "xsd") {
        enginesForCurrentTool.value = ["xalan", "libxml"]
    }
    else if (props.tool == "xquery") {
        enginesForCurrentTool.value = ["saxon"]
    }

    selectDefaultEngine();
}

function changeAvailableVersions() {
    if (props.tool == "xquery")
        versionsForCurrentEngine.value = ["3.1"];
    else if (props.tool == "xslt")
        changeAvailableVersionsOfXSLT();
    else if (props.tool == "xsd")
        versionsForCurrentEngine.value = ["N/A"];
    else if (props.tool == "xpath")
        changeAvailableVersionsOfXPath();

    selectDefaultVersion();
}

function changeAvailableVersionsOfXSLT() {
    if(engine.value == "saxon")
        versionsForCurrentEngine.value = ["3.0"];
    else
        versionsForCurrentEngine.value = ["1.0"];
}

function changeAvailableVersionsOfXPath() {
    if(engine.value == "xalan" || engine.value == "libxml")
        versionsForCurrentEngine.value = ["1.0"];
    else if (engine.value == "saxon")
        versionsForCurrentEngine.value = allVersions;
}

function selectDefaultEngine() {
    engine.value = enginesForCurrentTool.value[0];
}

function selectDefaultVersion() {
    const lastVersion = versionsForCurrentEngine.value.length - 1
    version.value = versionsForCurrentEngine.value[lastVersion];
}

function process() {
    var request:Request = prepareRequest();
    fetchRequest(request).then((data) => {
        updateOutputField(data);
    })
}

function prepareRequest():Request {
    var request = new Request(prepareURL(), {
        body: prepareRequestBody(),
        method: "POST"
    });
    return request
}

function prepareURL(): string {
   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
}

function prepareRequestBody():string {
    var requestBody = JSON.stringify({
        "data": props.xml,
        "process": props.query,
        "processor": engine.value,
        "version": version.value
    });
    return requestBody;
}

async function fetchRequest(request: Request):Promise<JSON> {
    var responseBody = await fetch(request)
    .then(response => response.json())
    .then((body) => body);
    return responseBody;
}

function updateOutputField(data: any) {
    result.value = data.result;
}

function clear() {
    result.value = "";
}

</script>

<template>
    <div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
        <div class="flex place-content-between w-full items-center m-2">
            <span class="dark:text-white">Result:</span>
            <div class="flex space-x-2">
                <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                    <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                </select>
                <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                    <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                </select>
                <button class="tool-button" @click="clear">Clear</button>    
                <button class="tool-button" @click="process">Process</button>
            </div>
        </div>
        <div class="text-field overflow-scroll h-full w-full">
            <!--  <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>  -->
            <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
        </div>
        
    </div>
</template>
