<script setup lang="ts">
import { ref } from 'vue';
import HistoryRecords from './HistoryRecords.vue';
import BodyDetailComponent from './BodyDetailComponent.vue';
import HeadersDetailComponent from './HeadersDetailComponent.vue';

const shownDetail = ref('none');
const currentShownData = ref('');
const currentIndex = ref(-1);

function showBody(body : string, index: number){
    if( currentIndex.value == index && shownDetail.value == "body" ){
        shownDetail.value = "none";
    } else {
        currentIndex.value = index;
        shownDetail.value = "body";
        currentShownData.value = body;
    }
}

function showHeaders(headers: object, index: number){
    if(currentIndex.value == index && shownDetail.value == "headers" ){
        shownDetail.value = "none";
    } else {
        currentIndex.value = index;
        shownDetail.value = "headers";
        currentShownData.value = JSON.stringify(headers);
    }
}

</script>


<template>
    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
    </div>
</template>