<template>
  <!-- <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
    <Spinner v-if="loading == 'loading'" class="mx-auto" />
    <p v-else-if="loading == 'failed'" @click="fetchProtocolPrintout" class="cursor-pointer">
      &#8634; laden fehlgeschlagen
    </p>

    <div class="flex flex-col gap-2 h-full overflow-y-auto">
      <div
        v-for="print in printout"
        :key="print.id"
        class="flex flex-col h-fit w-full border border-primary rounded-md"
      >
        <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
          <p>{{ print.title }}</p>
          <div class="flex flex-row">
            <div>
              <ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print.id)" />
            </div>
            <div>
              <ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print.id)" />
            </div>
          </div>
        </div>
        <div class="p-2">
          <p>Ausdruck Nummer: {{ print.iteration }}</p>
          <p>Ausdruck erstellt: {{ print.createdAt }}</p>
        </div>
      </div>
    </div>

    <div class="flex flex-row justify-start gap-2">
      <button
        v-if="can('create', 'club', 'newsletter')"
        primary
        class="!w-fit"
        :disabled="printing != undefined"
        @click="createProtocolPrintout"
      >
        Ausdruck erstellen
      </button>
      <Spinner v-if="printing == 'loading'" class="my-auto" />
      <SuccessCheckmark v-else-if="printing == 'success'" />
      <FailureXMark v-else-if="printing == 'failed'" />
    </div>
  </div> -->
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
// import { useProtocolPrintoutStore } from "@/stores/admin/newsletterPrintout";
import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "@/stores/modal";
import { useAbilityStore } from "@/stores/ability";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    newsletterId: String,
  },
  // computed: {
  //   ...mapState(useProtocolPrintoutStore, ["printout", "loading", "printing"]),
  //   ...mapState(useAbilityStore, ["can"]),
  // },
  // mounted() {
  //   this.fetchProtocolPrintout();
  // },
  // methods: {
  //   ...mapActions(useModalStore, ["openModal"]),
  //   ...mapActions(useProtocolPrintoutStore, [
  //     "fetchProtocolPrintout",
  //     "createProtocolPrintout",
  //     "fetchProtocolPrintoutById",
  //   ]),
  //   openPdfShow(id: number) {
  //     this.openModal(
  //       markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/ProtocolPrintoutViewerModal.vue"))),
  //       id
  //     );
  //   },
  //   downloadPdf(id: number) {
  //     let clickedOn = this.printout.find((p) => p.id == id);
  //     this.fetchProtocolPrintoutById(id)
  //       .then((response) => {
  //         const fileURL = window.URL.createObjectURL(new Blob([response.data]));
  //         const fileLink = document.createElement("a");
  //         fileLink.href = fileURL;
  //         fileLink.setAttribute("download", clickedOn?.title ? clickedOn.title + ".pdf" : "Protokoll.pdf");
  //         document.body.appendChild(fileLink);
  //         fileLink.click();
  //         fileLink.remove();
  //       })
  //       .catch(() => {});
  //   },
  // },
});
</script>
