<template>
	<div className="card">
		<DataTable v-model:filters="filters" :value="vectorDetails" dataKey="id" :loading="loading" paginator
			showGridlines :rows="10" filterDisplay="menu"
			:globalFilterFields="['id', 'metadata.ksApplicationName', 'metadata.ksDocSource', 'metadata.ksDoctype', 'metadata.ksFileSource']">
			<template #header>
				<div class="flex items-center justify-between gap-4 p-4 ">
					<span class="text-xl font-bold">Vector Data</span>
					<div class="flex items-center gap-2 flex-grow">
						<IconField class="flex-grow">
							<InputIcon>
								<i class="pi pi-search" />
							</InputIcon>
							<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
						</IconField>
					</div>
				</div>
			</template>
			<template #empty>No Records found</template>
			<template #loading>Loading Data. Please wait.....</template>
			<Column field="id" header="Id" sortable>
				<template #body="{ data }">
					{{ data.id }}
				</template>
				<template #filter="{ filterModel, filterCallback }">
					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
						placeholder="Search By id" />
				</template>
			</Column>
			<Column field="metadata.ksApplicationName" header="KsApplicationName" sortable>
				<template #body="{ data }">
					{{ data.metadata.ksApplicationName }}
				</template>
				<template #filter="{ filterModel, filterCallback }">
					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
						placeholder="Search By Application name" />
				</template>
			</Column>
			<Column field="metadata.ksFileSource" header="KsFileSource" sortable>
				<template #body="{ data }">
					{{ data.metadata.ksFileSource }}
				</template>
				<template #filter="{ filterModel, filterCallback }">
					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
						placeholder="Search By Source/Path" />
				</template>
			</Column>
			<Column field="metadata.ksDocSource" header="KsDocSource" sortable>
				<template #body="{ data }">
					{{ data.metadata.ksDocSource }}
				</template>
				<template #filter="{ filterModel, filterCallback }">
					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
						placeholder="Search By Document/Repo source" />
				</template>
			</Column>
			<Column field="metadata.ksDoctype" header="KsDoctype" sortable>
				<template #body="{ data }">
					{{ data.metadata.ksDoctype }}
				</template>
				<template #filter="{ filterModel, filterCallback }">
					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
						placeholder="Search By Document/Source type" />
				</template>
			</Column>
		</DataTable>
	</div>
</template>
<script setup>
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import axios from 'axios';
import { onMounted, ref } from 'vue';

const vectorDetails = ref(null);
const loading = ref(true);
const filters = ref();

onMounted(() => {
	axios.get('/fe-api/vector-store/details')
		.then(response => {
			vectorDetails.value = response.data;
			console.log(vectorDetails.value)
			loading.value = false;
		});
});

const initFilters = () => {
	filters.value = {
		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
		id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
		'metadata.ksApplicationName': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
		'metadata.ksDocSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
		'metadata.ksDoctype': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
		'metadata.ksFileSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
	};
};

initFilters();
</script>
