<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', 'protocol')"
        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/club/protocol/protocolPrintout";
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: {
    protocolId: 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/protocol/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>
