<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib";
import Modal from "../Modal.vue";
import MarkdownRender from "vue-renderer-markdown";
import "katex/dist/katex.min.css";
import Forms from "./Forms.vue";
import { ref } from "vue";
import { EventType, MyEvent } from "../../dto/event.dto.js";

const initdone=ref(false);

const events = ref<MyEvent[]>([]);

const openedModals=ref<number[]>([]);

const modaltypes=[EventType.html,EventType.markdown];

async function init() {
	
	events.value=(await RitzenbergenLib.graphqlClient.request<{events: MyEvent[]}>
(`{
	events {
		id
		eventname
		type
		minitext
		datum
		content
		link
		foto
		formular
	}
}`)).events;
	console.log(events.value);

	
}

init().then(()=>{

	initdone.value=true;

});

function format_date(date: string){
	return new Date(date).toDateString();
}

function vorschautext(str: string){
	return str;
}

</script>
<template>
	<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG" v-if="initdone">
		<div class="container-fluid">
			<div class="row justify-content-center mb-5">
				<div class="col-12 content-head">
					<div class="mbr-section-head">
						<h4
							class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
						>
							<strong>Termine & Neuigkeiten</strong>
						</h4>
					</div>
				</div>
			</div>
			<div class="row" v-if="events">
				<!-- Events -->

				<h5 class="align-center" v-if="events.length == 0">
					Es stehen keine Events an.
				</h5>

				<div
					v-for="(event, i) in events"
					:key="i"
					class="item features-image col-12 col-md-6 col-lg-3"
					:class="{ active: i % 4 == 0 }"
				>
					<Modal
						v-show="
							openedModals.includes(event.id) &&
							modaltypes.includes(event.type)
						"
						@closemodal="
							openedModals.splice(
								openedModals.indexOf(event.id),
								1
							)
						"
					>
						<MarkdownRender
							v-if="event.type == EventType.markdown"
							:content="event.content"
						/>
						<div v-else v-html="event.content"></div>
						<Forms v-if="event.formular" :formid="event.formular"/>
					</Modal>

					<div class="item-wrapper">
						<div class="item-img mb-3">
							<img :src="RitzenbergenLib.RitzenbergenLib.get_img(event.foto)" />
						</div>
						<div class="item-content align-left">
							<h6
								class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5"
							>
								<strong
									><a
										class="text-black fw-bold"
										:data-id="event.id"
										>{{ event.eventname }}</a
									></strong
								>
							</h6>
							<p class="mbr-text mbr-fonts-style mb-3 display-7">
								{{ format_date(event.datum) }}
							</p>
							<p class="mbr-text mbr-fonts-style mb-3 display-7">
								{{ vorschautext(event.minitext) }}
							</p>
							<div class="mbr-section-btn item-footer">
								<a
									:download="
										event.type == 'dlink'
											? event.link
											: undefined
									"
									:href="event.link"
									><button
										class="btn item-btn btn-primary display-7"
										:data-id="event.id"
										@click="openedModals.push(event.id)"
									>
										<span v-if="event.type == 'link'"
											>Einladung öffnen</span
										>
										<span v-else-if="event.type == 'dlink'"
											>Einladung runterladen</span
										>
										<span
											v-else-if="event.type == 'fotos'"
											@click="galerie(event.content)"
											>Fotos ansehen</span
										>
										<span v-else>Mehr</span>
									</button></a
								>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-else>
					<h1>Keine Internetverbindung!</h1>

			</div>
		</div>
	</section>
</template>
<style></style>
