<template>
  <div class="w-full md:max-w-md">
    <div class="flex flex-col items-center">
      <p class="text-xl font-medium">Newsletter Mail-Versand Logs</p>
    </div>
    <br />

    <div class="flex flex-col gap-2 h-96 overflow-y-scroll">
      <div
        v-for="entry in mailSourceMessages"
        class="flex flex-row gap-2 border border-gray-200 rounded-md p-1 items-center"
      >
        <SuccessCheckmark v-if="entry.factor == 'success'" class="w-5 h-5" />
        <InformationCircleIcon v-else-if="entry.factor == 'info'" class="w-5 h-5 min-h-5 min-w-5 text-gray-500" />
        <FailureXMark v-else-if="entry.factor == 'failed'" class="w-5 h-5" />
        <p>{{ entry.iteration }}/{{ entry.total }}: {{ entry.msg }}</p>
      </div>
    </div>

    <div class="flex flex-row justify-end">
      <div class="flex flex-row gap-4 py-2">
        <button primary-outline @click="closeModal">schließen</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import { InformationCircleIcon } from "@heroicons/vue/24/solid";
import FailureXMark from "@/components/FailureXMark.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {};
  },
  computed: {
    ...mapState(useNewsletterPrintoutStore, ["mailSourceMessages"]),
  },
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
  },
});
</script>