<template>
    <div className="card">        
        <h5>Ks document</h5>
        <form @submit.prevent="submitForm">
            <div class="p-field">
                <label for="description">Description</label>
                <InputText id="description" v-model="ksdocument.description" />
            </div>
            <div class="p-field">
                <label for="fileName">File Name</label>
                <InputText id="fileName" v-model="ksdocument.fileName" />
            </div>
            <div class="p-field">
                <label for="filePath">File Path</label>
                <InputText id="filePath" v-model="ksdocument.filePath" />
            </div>
            <div class="p-field">
                <label for="ingestionDate">Ingestion Date</label>
                <InputText id="ingestionDate" v-model="ksdocument.ingestionDate" />
            </div>
            <div class="p-field">
                <label for="defaultChunkSize">Default Chunk Size</label>
                <InputNumber id="defaultChunkSize" v-model="ksdocument.ingestionInfo.defaultChunkSize" />
            </div>
            <div class="p-field">
                <label for="maxNumberOfChunks">Max Number of Chunks</label>
                <InputNumber id="maxNumberOfChunks" v-model="ksdocument.ingestionInfo.maxNumberOfChunks" />
            </div>
            <div class="p-field">
                <label for="minChunkSize">Min Chunk Size</label>
                <InputNumber id="minChunkSize" v-model="ksdocument.ingestionInfo.minChunkSize" />
            </div>
            <div class="p-field">
                <label for="minChunkSizeToEmbed">Min Chunk Size To Embed</label>
                <InputNumber id="minChunkSizeToEmbed" v-model="ksdocument.ingestionInfo.minChunkSizeToEmbed" />
            </div>
            <div class="p-field">
                <label for="type">Type</label>
                <InputText id="type" v-model="ksdocument.ingestionInfo.type" />
            </div>
            <div class="p-field">
                <label for="ingestionStatus">Ingestion Status</label>
                <InputText id="ingestionStatus" v-model="ksdocument.ingestionStatus" />
            </div>
            <div class="p-field">
                <label for="name">Name</label>
                <InputText id="name" v-model="ksdocument.name" />
            </div>
            <div class="p-field">
                <label for="metadata">Metadata</label>
                <InputTextarea id="metadata" v-model="ksdocument.ingestionInfo.metadata" />
            </div>
            <Button label="Submit" type="submit" />
        </form>
    </div>
</template>

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

import { useRoute, useRouter } from 'vue-router'
import { data } from 'autoprefixer';

const route = useRoute()

const ksdocument = ref({ingestionInfo:{}});

onMounted(() => {
    axios.get('http://localhost:8082/ksdocuments/'+route.params.id)
        .then(response => {
            console.log(response.data);
            ksdocument.value = response.data;
        });
});

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