<script setup lang="ts">
import { ref } from 'vue';
import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue';
import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue';

import xpath1 from '@/assets/tooltips/xpath/xpath1.json';
import xpath2 from '@/assets/tooltips/xpath/xpath2.json';
import xpath3 from '@/assets/tooltips/xpath/xpath3.json';
import xpath31 from '@/assets/tooltips/xpath/xpath31.json';
import xslt1 from '@/assets/tooltips/xslt/xslt1.json';
import xslt3 from '@/assets/tooltips/xslt/xslt3.json'
import TooltipDiffsComponent from './TooltipDiffsComponent.vue';


const props = defineProps({
    version: {
        type: String,
        required: true
    },
    toolType: {
        type: String,
        required: true
    }
})

const areTooltipsHidden = ref(true)

function selectTooltip() {
    if(props.toolType == "xpath"){
        switch(props.version) {
        case "1.0":
            return xpath1;
        case "2.0":
            return xpath2;
        case "3.0":
            return xpath3;
        case "3.1":
        default:
            return xpath31;
    }
    } else {
        switch(props.version){
            case "1.0":{
                return xslt1;
            }
            case "3.0":{
                return xslt3;
            }
        }
    }
    
}

function toggleTooltips() {
    areTooltipsHidden.value = !areTooltipsHidden.value;
}

</script>

<template>
    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-lg shadow-lg bg-[#bbe3ef] dark:bg-[#2A93B0] dark:from-sky-600 dark:to-sky-800 ">
        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
            T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
        </button>
        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-lg dark:text-white bg-[#bbe3ef] dark:bg-gray-700" >
            <TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
            <div class="w-full h-2"> </div>
            <tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">
                <tooltipEntryComponent :tool="toolType" v-for="entry in category.entries" :key="entry.name" :entry-data="entry"></tooltipEntryComponent>
            </tooltipCategoryComponent>
        </div>
    </div>
</template>