<template>
    
    <div class=" w-[100%] h-[100%]  overflow-hidden">
        <div class="flex justify-between mb-[20px]">
        <div>
        <div>Entity you searched for: <span class="!font-bold">{{ searchWhat || "You did not provide" }}</span></div>
        <div>Search Type: <span class="!font-bold">{{ searchStore.searchParams.search_type || "You did not provide" }}</span></div>
        </div>
        <div>
            <button @click="goToSearchPage" class="btn rounded-[10px] bg-[#0000FF] text-[white]">Back To Search Page</button>
        </div>
        </div>
        <div v-if="responseData" class="pt-[0px] h-[90%] w-[100%] border border-[blue] overflow-scroll">
            <table class="table table-pin-rows border w-full">
                <thead class="">
                    <!-- <tr  class=""> -->
                        <!-- <th v-for="item in keys_of_a_data" class=" sticky top-0 z-10">{{item}}</th> -->
                        <!-- <th colspan="52">metadata</th>
                        <th>search</th>
                    </tr> -->
                    <tr class="sticky border bg-[#000C66] text-[white]">
                        <th v-for="item in arr_col_items" class="sticky border border-gray-600">{{ item }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in row_values" >
                        <td v-for="item2 in item" class="border">{{ item2 }}</td>
                        
                    </tr>
                </tbody>
            </table>
            
        </div>
        <div class="h-[90%] w-[100%] flex justify-center items-center font-bold text-[red] text-[32px]" v-else>No search results</div>
    </div>
</template>
<script setup lang="ts">
import {ref,reactive,onMounted,toRaw} from "vue";
import { useSearchStore } from "@/stores/searchStore";
import {fetchData} from "@/utils/api.ts"
import { useRouter } from "vue-router";
const searchStore = useSearchStore();

const responseData = ref("")
const searchWhat = ref(searchStore.searchParams.query)

const query={...searchStore.searchParams}

const keys_of_a_data=ref<any[]>()

const arr_col_items=ref<any[]>([])

const row_values = ref<any[]>([])
const router = useRouter();
const goToSearchPage=()=>{
    router.push ("/")
}

onMounted(()=>{
    fetchData("/search","POST",query).then(response =>{
        
        console.log("response kk:", response)
        //console.log("responseData start dolphine: ", typeof responseData.value.data.length)
        if (response.data.length===0){
            
            console.log("responseData.value 12: ", responseData.value)
            responseData.value=""
            console.log("responseData.value 13: ", responseData.value)
        }
        else {
            responseData.value = response
        keys_of_a_data.value = Object.keys(response.data[0])
        

        const test = Object.keys(response.data[0].metadata)
        
        const test2 = Object.keys(response.data[0].search)
        
        keys_of_a_data.value.forEach((item, index)=>{
            
            arr_col_items.value.push(...Object.keys(response.data[0][item]))
        })
        

        response.data.map(item=>{
            const values:any[]=[]
           
            Object.keys(item).forEach(key=>{
                console.log("key12: ", key)
                values.push(...Object.values(item[key]))
            
            })
            
            row_values.value.push(values)

        }) }

        
    }).catch(error=>{
        responseData.value = "error"
        console.log(error)
    })

}
);

</script>