<script lang="ts" setup>
import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue";
import MyFooter from "../components/MyFooter.vue"; 

const { $gql } = useNuxtApp();

function mapperSrc(event:string, jahr:number){
  return "http://localhost:3000/api/galerie/randomimage/"+event+"/"+jahr;
}
function mapperLink(event:string, jahr:number){
  return "/bildvorschau/"+event+"/"+jahr;
}

const events = await $gql.request<{
  erntefest: Array<{jahr:number}>,
  osterfeuer: Array<{jahr:number}>,
  fussball: Array<{jahr:number}>,
  doppelkopf: Array<{jahr:number}>
}>(`
{
  erntefest: bilder(event: "erntefest") {
    jahr
  }

  osterfeuer: bilder(event: "osterfeuer") {
    jahr
  }

  doppelkopf: bilder(event: "doppelkopf") {
    jahr
  }

  fussball: bilder(event: "fussball") {
    jahr
  }
}

`);
  
const mappedEvents=[
  {
    "title":"Erntefest",
    "src": events.erntefest.map((event)=>mapperSrc("erntefest",event.jahr)),
    "links": events.erntefest.map((event)=>mapperLink("erntefest",event.jahr)),
    "id":"erntefest",
    "jahre": events.erntefest.map((event)=>event.jahr)
  },
  {
    "title":"Osterfeuer",
    "src": events.osterfeuer.map((event)=>mapperSrc("osterfeuer",event.jahr)),
    "links": events.osterfeuer.map((event)=>mapperLink("osterfeuer",event.jahr)),
    "id":"osterfeuer",
    "jahre": events.osterfeuer.map((ev)=>ev.jahr),
  },
  {
    "title":"Preisdoppelkopf",
    "src": events.doppelkopf.map((event)=>mapperSrc("doppelkopf",event.jahr)),
    "links": events.doppelkopf.map((event)=>mapperLink("doppelkopf",event.jahr)),
    "id":"doppelkopf",
    "jahre": events.doppelkopf.map((ev)=>ev.jahr),
  },
  {
    "title":"Fußballturniere",
    "src": events.fussball.map((event)=>mapperSrc("fussball",event.jahr)),
    "links": events.fussball.map((event)=>mapperLink("fussball",event.jahr)),
    "id":"fussball",
    "jahre": events.fussball.map((ev)=>ev.jahr),
  },
]


</script>
<template>
  <Navbar :links="[
    { title: 'Erntefest', link: '/galerie/#erntefest' },
    { title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
    { title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
    { title: 'Fußballturniere', link: '/galerie/#fussball' },
  ]" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />

  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-12 col-lg-10">
          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
            <strong>Willkommen in der Galerie</strong>
          </h3>
          <p class="mbr-text mbr-fonts-style display-7">
            In unserem Fotoalbum findest du chronisch geordnete Bilder
            verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
            auf ein Bild mit einer Jahreszahl raufklicken.
          </p>
        </div>
      </div>
    </div>
  </section>

  <br /><br />
  <section
    class="slider4 mbr-embla cid-u6k7q0yLdW"
    v-for="event in mappedEvents"
    :id="event.id"
  >
    <div class="container-fluid">
      <div class="row">
        <h4
          class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
        >
          <strong>{{ event.title }}</strong>
        </h4>
        <div class="col-12">
          <br />
          <!-- src: Link zum Randomimage, links: Link zur Bildschau -->
          <Embla :src="event.src" :links="event.links" :jahre="event.jahre" />
        </div>
      </div>
    </div>
    <br /><br /><br />
  </section>
	<h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
    <br /><br /><br />
  <MyFooter />
</template>
<style scoped></style>
