<template>
    <form @submit.prevent="submitForm" class="p-fluid">
        <div class="flex flex-col gap-6">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <label for="repoName" class="block font-bold mb-3">Repo Name</label>
                    <InputText id="repoName" v-model.trim="formData.repoName" placeholder="Enter Repo Name"
                        required="true" fluid />
                </div>
                <div class="col-span-6">
                    <label for="group" class="block font-bold mb-3">Group Name</label>
                    <InputText id="group" v-model.trim="formData.group" placeholder="Enter Group Name" required="true"
                        fluid />
                </div>
            </div>


            <div>
                <label for="source" class="block font-bold mb-3">Git Source URL</label>
                <!--InputText id="source" v-model.trim="formData.source" placeholder="Enter Source base URL"
                    required="true" /-->
                <Select id="source" v-model="formData.source" :options="gitSourceURLs" optionLabel="label"
                    optionValue="value" placeholder="Select Git URL" fluid></Select>
            </div>

            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <label for="branch" class="block font-bold mb-3">Branch</label>
                    <InputText id="branch" v-model.trim="formData.branch" placeholder="Enter Branch" required="true" />
                </div>
                <div class="col-span-6">
                    <label for="tokenType" class="block font-bold mb-3">Git Token Type</label>
                    <Select id="tokenType" v-model="formData.tokenType" :options="tokenTypes" optionLabel="label"
                        optionValue="value" placeholder="Select Git Token Type" fluid></Select>
                </div>
            </div>


            <!--div>
                <label for="commitId" class="block font-bold mb-3">CommitID</label>
                <InputText id="commitId" type="text" v-model.trim="formData.commitId" required="true" />
            </div-->


            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <label for="defaultChunkSize" class="block font-bold mb-3">Default Chunk Size</label>
                    <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required="true" integeronly
                        fluid />
                </div>
                <div class="col-span-6">
                    <label for="minChunkSize" class="block font-bold mb-3">Min Chunk Size</label>
                    <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required="true" integeronly fluid />
                </div>
            </div>

            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <label for="maxNumberOfChunks" class="block font-bold mb-3">Max Number of Chunks</label>
                    <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required="true" integeronly
                        fluid />
                </div>
                <div class="col-span-6">
                    <label for="minChunkSizeToEmbed" class="block font-bold mb-3">Min Chunk Size to Embed</label>
                    <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required="true"
                        integeronly fluid />
                </div>
            </div>
        </div>
        <div class="button-container">
            <Button type="button" label="Cancel" text rounded raised :fluid="false" severity="danger"
                class="p-button-rounded p-button-lg mt-4 mr-4" @click="handleCancel" />
            <Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false"
                class="p-button-rounded p-button-lg mt-4" />
        </div>

    </form>
</template>
<script setup>
import { ref } from 'vue';

const formData = ref({
    repoName: 'shellExecutionThroughAPI',
    group: 'automationtester23',
    source: 'https://github.com',
    branch: 'master',
    commitId: 'latest',
    tokenType: 'github',
    repoPath: 'C:\\repos\\olympus_ai\\gitClone',
    defaultChunkSize: 1988,
    minChunkSize: 200,
    maxNumberOfChunks: 1988,
    minChunkSizeToEmbed: 20
});

const gitSourceURLs = ref([
    { label: 'https://github.com', value: 'https://github.com' },
    { label: 'https://gitlab.gcp.windtre.it', value: 'https://gitlab.gcp.windtre.it' },
    { label: 'http://devops-tool-a-vip01.wind.root.it:8888', value: 'http://devops-tool-a-vip01.wind.root.it:8888' }
]);

const tokenTypes = ref([
    { label: 'git-cloud', value: 'cloud' },
    { label: 'git-onpremises', value: 'onpremises' },
    { label: 'git-github', value: 'github' }
]);

const isSubmitting = ref(false);

const emit = defineEmits(['submitForm', 'cancel'])

const handleCancel = () => {
    emit('cancel')
}

const submitForm = () => {
    if (isSubmitting.value) return; // Prevent duplicate submissions

    isSubmitting.value = true;

    const formDataToSend = new FormData();
    formDataToSend.append('repoName', formData.value.repoName);
    formDataToSend.append('group', formData.value.group);
    formDataToSend.append('source', formData.value.source);
    formDataToSend.append('branch', formData.value.branch);
    formDataToSend.append('commitId', formData.value.commitId);
    formDataToSend.append('tokenType', formData.value.tokenType);
    //formDataToSend.append('repoPath', formData.value.repoPath);
    formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
    formDataToSend.append('minChunkSize', formData.value.minChunkSize);
    formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
    formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
    //console.log(formData);

    const json = formDatatoJson(formDataToSend);
    console.log(json)
    emit('submitForm', json)
};

function formDatatoJson(formData) {
    const jsonObject = {};
    formData.forEach((value, key) => {
        jsonObject[key] = value;
    })
    return jsonObject;
}
</script>

<style scoped>
.button-container {
    display: flex;
    justify-content: flex-end;
}
</style>