<template>
    <div className="card">        

        <DataTable
            :value="ksdocuments"
            :paginator="true"
            :rows="10"
            dataKey="id"
            :rowHover="true"
            showGridlines
        >
        <template #header>
            <div class="flex flex-wrap items-center justify-between gap-2">
                <span class="text-xl font-bold">KS Documents</span>
                <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" /> 
            </div>
        </template>
        <Column field="name" header="Name"></Column>
        <Column field="fileName" header="File Name"></Column>
        <Column field="ingestionStatus" header="Status">
            <template #body="slotProps">
                <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
            </template>
        </Column>
        <Column field="ingestionDate" header="Ingestion Date"></Column>
        <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
            <template #body="slotProps">
                <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
            </template>
        </Column>
        </DataTable>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue'
import axios from 'axios';

import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const ksdocuments = ref(null);
const scenario = ref([])

onMounted(() => {
    axios.get('http://localhost:8082/fe-api/ksdocuments')
        .then(response => {
            console.log(response.data);
            ksdocuments.value = response.data;
        });
});

const getStatus = (data) => {
    if (data.ingestionStatus === 'INGESTED') {
        return 'success';
    } else if (data.ingestionStatus === 'NEW') {
        return 'danger';
    } else {
        return 'warning';
    }
}

const editKsDocument = (data) => {
    console.log(data);
    router.push({ name: 'ks-document-edit', params: { id: data.id } });
}

const newKsDocument = () => {
    console.log('new');
    router.push({ name: 'ks-document-new'});

}
</script>
