<template>
  <MainTemplate>
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Newsletter Konfiguration</h1>
      </div>
    </template>
    <template #main>
      <p>
        Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br>
        Die Entscheidung für den Export geschieht anhand der Einstellung "Newsletter hier hin versenden?". <br>
        Wird keine Adresse gefunden oder sind die Typen mit den falschen Versandoptionen konfiguriert, 
        erstellt das System als Fallback pdfs mit nur dem Namen des Mitglieds.
      </p>
      <NewsletterConfigListItem v-for="comType in communicationTypes" :key="comType.id" :comType="comType" />
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import {  defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useAbilityStore } from "@/stores/ability";
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
import { useNewsletterConfigStore } from "@/stores/admin/newsletterConfig";
import NewsletterConfigListItem from "@/components/admin/settings/newsletterConfig/NewsletterConfigListItem.vue";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useCommunicationTypeStore, ["communicationTypes"]),
    ...mapState(useNewsletterConfigStore,["config"]),
    ...mapState(useAbilityStore, ["can"]),
  },
  mounted() {
    this.fetchCommunicationTypes();
    this.fetchNewsletterConfigs()
  },
  methods: {
    ...mapActions(useCommunicationTypeStore, ["fetchCommunicationTypes"]),
    ...mapActions(useNewsletterConfigStore, ["fetchNewsletterConfigs"])
  },
});
</script>
