<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib";
import FormResults from "../FormResults.vue";
import { ref } from "vue";
import Modal from "../Modal.vue";
import { Formular } from "../../dto/formular.dto";

async function init() {
	forms.value=await RitzenbergenLib.graphqlClient.request<{formulare: Formular[] }>(`
{
	formulare {
		id
		name
		minitext
		ispublic
		fields {
			id
			name
			displayname
			displayvalue
			placeholder
			type
			title
			required
			maxlength
			min
			max
			checked
			value
		}
	}
}
`
	).then(data=>data.formulare);

	console.log(forms.value);
}

const forms = ref([] as Formular[]);

const props=defineProps({
		formid: {
				type: [Number, null],
				required: false,
				default: null 
		}
});

init();

function submit($event: Event) {
	const url = new URL(
		RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
	);
	const formData = new FormData(<HTMLFormElement>$event.target); 
	fetch(url.toString(), {
		method: "POST",
		body: formData	
	}).then(() => {
		init();
		values.value={};
	});
}

const modalOpened=ref<boolean>(false);

const openedForm=ref<Formular|null>(null);

function openModal(form: Formular){
	openedForm.value=form;
	modalOpened.value=true;
}

const values=ref({});
</script>
<template>
		<Modal v-if="openedForm && openedForm.ispublic" v-show="modalOpened" @closemodal="modalOpened=false">
		<FormResults v-if="modalOpened" :form="openedForm"/>
		</Modal>
	<section ref="anmeldeformular" id="anmeldeformular">
		<section class="form5 cid-u6k7q0BfGa">
				<div class="container" v-for="(form, i) in forms" :key="i">
				<div class="row justify-content-center">
					<div class="col-12 content-head">
						<div class="mbr-section-head mb-5">
							<h3
								class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
							>
								<strong>{{ form.name }}</strong>
							</h3>
							<br />
							<h5 style="text-align: center">
								<b @click="openModal(form)" class="fakelink" v-if="form.ispublic">{{ form.minitext }}
								</b> <b v-else>{{ form.minitext }}</b> <br />
															</h5>
							<br />
						</div>
					</div>
				</div>
				<div class="row justify-content-center">
					<div
						class="col-lg-8 mx-auto mbr-form"
						data-form-type="formoid"
					>
						<form
							class="mbr-form form-with-styler"
							data-form-title="Form Name"
							:data-formid="form.id"
							:data-i="i"
							@submit.prevent="submit"
						>
							<div v-for="(field, j) in form.fields" :key="j">
								<label
									v-if="field.placeholder == null"
									:for="'field-' + field.id"
								>
									{{
										field.displayvalue ?? field.displayname ?? field.name
									}}:
								<span v-if="field.type == 'range'"
									><br />{{ values[field.id] }}</span
								>
								</label>
								<FormKit
									v-if="field.type != 'textarea'"
									:id="'field-' + field.id"
									:type="field.type"
									:name="field.name"
									:placeholder="field.placeholder"
									:required="field.required"
									:maxlength="field.maxlength"
									:min="field.min"
									:max="field.max"
									:checked="field.checked"
									:title="field.title"
									:value="field.value"
									v-model="values[field.id]"

								/>
								<textarea
									v-else
									:id="'field-' + field.id"
									:name="field.name"
									:placeholder="field.placeholder"
									:required="field.required"
									:maxlength="field.maxlength"
									:title="field.title"
									:value="field.value"
								></textarea>
								
							</div>

							<div
								class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn"
							>
								<button
									type="submit"
									class="btn btn-primary display-7 formular-submit-button"
								>
									Absenden
								</button>
							</div>
							<input type="hidden" :value="form.id" name="internalformid" />
						</form>
					</div>
				</div>
				<br/>
				<br/>
				<br/>
				<br/>
			</div>
		</section>
	</section>
</template>
<style scoped>
label {
	margin-right: 10px;
}
.fakelink{
		color: blue;
		text-decoration: underline;
		cursor: pointer;
}
</style>
