<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 Code 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 class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <label for="codeParsingToBeDone" class="block font-bold mb-3">code Parsing enable</label>
                    <Select id="codeParsingToBeDone" v-model="formData.codeParsingToBeDone"
                        :options="[{ label: 'Enable', value: true }, { label: 'Disable', value: false }]"
                        optionLabel="label" optionValue="value" fluid></Select>
                </div>
                <!--div class="col-span-6">
                    <label for="codeType" class="block font-bold mb-3">Git Token Type</label>
                    <Select id="codeType" v-model="formData.codeType" :options="codeTypes" optionLabel="label"
                        optionValue="value" placeholder="Select Git Token Type" fluid></Select>
                </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>

            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-6">
                    <div>
                        <label for="projectName" class="block font-bold mb-3">projectName</label>
                        <InputText id="projectName" type="text" v-model.trim="formData.projectName" required="true" />
                    </div>
                </div>

                <div>
                    <label for="applicationVersion" class="block font-bold mb-3">applicationVersion</label>
                    <InputText id="applicationVersion" type="text" v-model.trim="formData.applicationVersion"
                        required="true" />
                </div>
            </div>
            <!-- Code Types Section -->
            <div>
                <h3 class="font-bold mb-3">Code Types</h3>
                <div v-for="(codeType, index) in formData.codeTypes" :key="index" class="grid grid-cols-12 gap-4">
                    <div class="col-span-4">
                        <label :for="'codeType-' + index" class="block font-bold mb-3">Type</label>
                        <InputText :id="'codeType-' + index" v-model.trim="codeType.type" placeholder="Enter Type"
                            required="true" fluid />
                    </div>
                    <div class="col-span-4">
                        <label :for="'reScenario-' + index" class="block font-bold mb-3">Re Scenario</label>
                        <InputText :id="'reScenario-' + index" v-model.trim="codeType.re_scenario"
                            placeholder="Enter Re Scenario" required="true" fluid />
                    </div>
                    <div class="col-span-4">
                        <label :for="'baseSource-' + index" class="block font-bold mb-3">Base Source</label>
                        <InputText :id="'baseSource-' + index" v-model.trim="codeType.base_source"
                            placeholder="Enter Base Source" required="true" fluid />
                    </div>
                </div>
                <!-- New Entry Row -->
                <!--div class="grid grid-cols-12 gap-4 mt-4">
                    <div class="col-span-4">
                        <InputText v-model.trim="newCodeType.type" placeholder="Enter Type" required="true" fluid />
                    </div>
                    <div class="col-span-4">
                        <InputText v-model.trim="newCodeType.re_scenario" placeholder="Enter Re Scenario"
                            required="true" fluid />
                    </div>
                    <div class="col-span-4">
                        <InputText v-model.trim="newCodeType.base_source" placeholder="Enter Base Source"
                            required="true" fluid />
                    </div>
                    <div class="col-span-1 flex items-center">
                        <button type="button" @click="addCodeType"
                            class="bg-blue-500 text-white px-4 py-2 rounded">+</button>
                    </div>
                </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({
    source: 'https://github.com',
    repoName: 'shellExecutionThroughAPI',
    group: 'automationtester23',
    tokenType: 'github',
    branch: 'master',
    commitId: 'latest',
    projectName: "TestProject01",
    applicationVersion: "V1.1",
    repoPath: 'C:/repos/olympus_ai/gitClone',
    codeParsingToBeDone: false,
    //codeType: 'Java',
    defaultChunkSize: 0,
    minChunkSize: 0,
    maxNumberOfChunks: 0,
    minChunkSizeToEmbed: 0,
    codeTypes: [
        { type: "Java", re_scenario: "671617d34aca060d07b4e13d", base_source: "/src/main/java" },
        { type: "jsp", re_scenario: "789", base_source: "/Path1" }
    ]
});

const newCodeType = ref({
    type: '',
    re_scenario: '',
    base_source: ''
});

const addCodeType = () => {
    if (newCodeType.value.type && newCodeType.value.re_scenario && newCodeType.value.base_source) {
        formData.value.codeTypes.push({ ...newCodeType.value });
        newCodeType.value.type = '';
        newCodeType.value.re_scenario = '';
        newCodeType.value.base_source = '';
    } else {
        alert('Please fill in all fields');
    }
};

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('codeParsingToBeDone', true);
    formDataToSend.append('codeTypes', JSON.stringify(formData.value.codeTypes));
    formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
    formDataToSend.append('minChunkSize', formData.value.minChunkSize);
    formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
    formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
    formDataToSend.append('projectName', formData.value.projectName);
    formDataToSend.append('applicationVersion', formData.value.applicationVersion);
    //console.log(formData);

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

function formDatatoJson(formData) {
    const jsonObject = {};
    formData.forEach((value, key) => {
        if (key === 'codeTypes' && typeof value === 'string') {
            jsonObject[key] = JSON.parse(value);
        } else {
            jsonObject[key] = value;
        }
    })
    return jsonObject;
}
</script>

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