<template>
	<FullScreenLoader v-if="loading" />

	<div id="bug-add">
		<h1>Pridať nový bug</h1>

		<form @submit.prevent="submitForm" class="form">
			<div class="form-group">
				<label for="title">Názov:</label>
				<input
					type="text"
					id="title"
					v-model="bugReport.title"
					required
					class="form-control"
					placeholder="Zadajte názov bug reportu"
				/>
			</div>

			<div class="form-group">
				<label for="description">Popis:</label>
				<textarea
					id="description"
					v-model="bugReport.description"
					rows="5"
					class="form-control"
					placeholder="Detailný popis problému"
					required
				></textarea>
			</div>

			<div class="cols">
				<div class="form-group">
					<label for="priority">Priorita:</label>
					<select
						id="priority"
						v-model="bugReport.priority"
						class="form-control"
						required
					>
						<option value="" disabled>Vyberte prioritu</option>
						<option value="0">Nízka</option>
						<option value="1">Stredná</option>
						<option value="2">Vysoká</option>
						<option value="3">Kritická</option>
					</select>
				</div>

				<div class="form-group">
					<label for="group">Skupina:</label>
					<select
						id="group"
						v-model="bugReport.group"
						class="form-control"
						required
					>
						<option value="" disabled>Vyberte skupinu</option>
						<option value="cp">Control Panel</option>
						<option value="task">Task.Platon.sk</option>
						<option value="websiteip">WebsiteIP</option>
						<option value="antispam">Antispam</option>
					</select>
				</div>

				<div class="form-actions">
					<router-link to="/" class="button"
						><font-awesome-icon :icon="['fas', 'circle-arrow-left']" />
						Zrušiť</router-link
					>
					<button type="submit">
						<font-awesome-icon :icon="['fas', 'circle-check']" /> Odoslať
					</button>
				</div>
			</div>
		</form>

		<p>Poznamka: Subory je mozne pridat ako prilohy az po vytvoreni noveho reportu..</p>
	</div>
</template>

<script>
import backend from "../backend";
import FullScreenLoader from "../components/FullScreenLoader.vue";

export default {
	name: "BugAdd",
	components: { FullScreenLoader },
	data() {
		return {
			bugReport: {
				title: "",
				description: "",
				priority: "1",
				group: "cp",
				files: [],
			},
			selectedFiles: [],
			loading: false,
		};
	},
	methods: {
		submitForm() {
			this.loading = true;
			// Vytvorenie FormData objektu pre odoslanie súborov
			const formData = new FormData();
			formData.append("title", this.bugReport.title);
			formData.append("description", this.bugReport.description);
			formData.append("priority", this.bugReport.priority);

			// Tu by nasledovalo odoslanie dát na server
			console.log("Odosielam bug report:", {
				title: this.bugReport.title,
				description: this.bugReport.description,
				priority: this.bugReport.priority,
			});
			backend
				.add(
					this.bugReport.title,
					this.bugReport.description,
					"0",
					this.bugReport.group,
					this.bugReport.priority
				)
				.then((result) => {
					console.log(result);
					this.resetForm();
					this.$router.push("/report/" + result.report_id);
				})
				.catch((error) => {
					console.log(error);
				})
				.finally(() => {
					this.loading = false;
				});
		},
		resetForm() {
			this.bugReport = {
				title: "",
				description: "",
				priority: "",
				files: [],
			};
		},
	},
};
</script>
