<script>
  import { _ } from "svelte-i18n";
  import {
    DonationService,
    RunnerTeamService,
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
  import { init } from "@paralleldrive/cuid2";
  const createId = init({ length: 10, fingerprint: "lfk-frontend" });

  export let certificates_show = false;
  export let generate_runners = [];
  export let generate_orgs = [];
  export let generate_teams = [];
  $: certificates_dropdown_open = false;
  document.addEventListener("click", function (e) {
    if (
      e.target.parentNode?.parentNode?.id != "certificates:dropdown" &&
      e.target.parentNode?.parentNode?.id != "certificates:dropdown:menu"
    ) {
      certificates_dropdown_open = false;
    }
  });

  function generateCertificates(locale) {
    certificates_dropdown_open = false;

    if (generate_orgs.length > 0) {
      generateOrgCertificates(locale);
    } else if (generate_teams.length > 0) {
      generateTeamCertificates(locale);
    } else {
      generateRunnerCertificates(locale);
    }
  }

  async function generateRunnerCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdf"),
      duration: -1,
    }).showToast();
    const current_donations =
      (await DonationService.donationControllerGetAll()) || [];
    let certificateRunners = [];
    for (let runner of generate_runners) {
      runner.distanceDonations =
        current_donations.filter((d) => d.runner?.id == runner.id) || [];
      console.log(runner.distanceDonations);
      certificateRunners.push(runner);
    }
    fetch(
      `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(certificateRunners),
      }
    )
      .then((response) => {
        if (response.status != "200") {
          toast.hideToast();
          Toastify({
            text: $_("pdf-generation-failed"),
            duration: 3500,
            backgroundColor:
              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
          }).showToast();
        } else {
          return response.blob();
        }
      })
      .then((blob) => {
        const url = window.URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        if (generate_runners.length == 1) {
          a.download = `${$_("certificates")}_${
            generate_runners[0].firstname
          }_${generate_runners[0].lastname}-${locale}-${createId()}.pdf`;
        } else {
          a.download = `${$_("certificates")}-${locale}.pdf`;
        }
        document.body.appendChild(a);
        a.click();
        a.remove();
        toast.hideToast();
        Toastify({
          text: $_("pdf-successfully-generated"),
          duration: 3500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
      })
      .catch((err) => {});
  }

  async function generateTeamCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    let count = 0;
    const current_donations =
      (await DonationService.donationControllerGetAll()) || [];
    for (const t of generate_teams) {
      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
        t.id
      );
      let certificateRunners = [];
      for (let runner of runners) {
        runner.distanceDonations =
          current_donations.filter((d) => d.runner?.id == runner.id) || [];
        certificateRunners.push(runner);
      }
      fetch(
        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(certificateRunners),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          count++;
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === generate_teams.length) {
            toast.hideToast();
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
    }
  }

  async function generateOrgCertificates(locale) {
    const toast = Toastify({
      text: $_("generating-pdfs"),
      duration: -1,
    }).showToast();
    const current_donations =
      (await DonationService.donationControllerGetAll()) || [];
    let count = 0;
    let count_orgs = 0;
    for (const o of generate_orgs) {
      count_orgs++;
      let count = 0;
      let runners =
        await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
          o.id,
          true
        );
      let certificateRunners = [];
      for (let runner of runners) {
        runner.distanceDonations =
          current_donations.filter((d) => d.runner?.id == runner.id) || [];
        certificateRunners.push(runner);
      }
      await fetch(
        `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(certificateRunners),
        }
      )
        .then((response) => {
          if (response.status != "200") {
            toast.hideToast();
            Toastify({
              text: $_("pdf-generation-failed"),
              duration: 3500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
          } else {
            return response.blob();
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.href = url;
          a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          if (count === o.teams.length && count_orgs === generate_orgs.length) {
            toast.hideToast();
            console.log("here");
            Toastify({
              text: $_("pdfs-successfully-generated"),
              duration: 3500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
          }
        })
        .catch((err) => {});
      for (const t of o.teams) {
        count++;
        let runners = await RunnerTeamService.runnerTeamControllerGetRunners(
          t.id
        );
        let certificateRunners = [];
        for (let runner of runners) {
          runner.distanceDonations =
            current_donations.filter((d) => d.runner?.id == runner.id) || [];
          certificateRunners.push(runner);
        }
        await fetch(
          `${config.baseurl_documentserver}/certificates?locale=${locale}&download=true&key=${config.documentserver_key}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(certificateRunners),
          }
        )
          .then((response) => {
            if (response.status != "200") {
              toast.hideToast();
              Toastify({
                text: $_("pdf-generation-failed"),
                duration: 3500,
                backgroundColor:
                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
              }).showToast();
            } else {
              return response.blob();
            }
          })
          .then((blob) => {
            const url = window.URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = url;
            a.download = `${$_("certificates")}_${o.name}_${
              t.name
            }-${locale}-${createId()}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            if (
              count === o.teams.length &&
              count_orgs === generate_orgs.length
            ) {
              toast.hideToast();
              Toastify({
                text: $_("pdfs-successfully-generated"),
                duration: 3500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
            }
          })
          .catch((err) => {});
      }
    }
  }
</script>

{#if certificates_show}
  <div id="certificates:dropdown" class="relative inline-block">
    <div>
      <button
        on:click={() => {
          certificates_dropdown_open = !certificates_dropdown_open;
        }}
        type="button"
        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
        id="options-menu"
        aria-haspopup="true"
        aria-expanded="true"
      >
        {$_("generate-runner-certificates")}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          class="-mr-1 ml-2 h-5 w-5"
          ><path fill="none" d="M0 0h24v24H0z" />
          <path
            fill="currentColor"
            d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"
          /></svg
        >
      </button>
    </div>
    {#if certificates_dropdown_open}
      <div
        class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10"
        id="certificates:dropdown:menu"
      >
        <div
          class="py-1"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu"
        >
          <span class="block w-full text-left px-4 py-2 text-sm text-gray-700"
            >{$_("select-language")}</span
          >
          <button
            on:click={() => {
              generateCertificates("de");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("german")}
          </button>
          <button
            on:click={() => {
              generateCertificates("en");
            }}
            type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
            role="menuitem"
          >
            {$_("english")}
          </button>
        </div>
      </div>
    {/if}
  </div>
{/if}
