<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);
const currentContentType = ref('application/json');

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

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="flex flex-1 flex-col xl:w-3/12 justify-items-stretch gap-y-4">
        <label class="dark:text-white text-center"><span class="font-bold">Attention! </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
        <HistoryRecords class="xl:h-1/3 overflow-y-auto" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
        <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
        <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
    </div>
</template>