<script setup lang="ts">
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';

import { type TabData } from '@/components/common/TabData';
import { ref } from 'vue';


const xml = ref(new Array<TabData>);
const query = ref('');
const version = ref('');
const engine = ref('')
const activeTabId = ref(0)

function updateVersion(newVersion: string) {
    version.value = newVersion;
}

</script>

<template>
    <div id="layout" class="flex flex-row w-full h-full">
        <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
            <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
                <xmlTabbedInputComponent stylized-name="XML" v-model:activeTabId="activeTabId" :engine="engine" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
                <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
            </div>
            <xmlOutputFieldComponent tool="xslt" :xml="xml" :active-tab-id="activeTabId" v-model:engine="engine" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
        </div>
        <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
    </div>
</template>