<script>
  import csv from "csvtojson";
  import { read as readXlsx, utils as xlsx_utils } from "xlsx";
  import { _ } from "svelte-i18n";
  import { clickOutside } from "../base/outsideclick";
  import { focusTrap } from "svelte-focus-trap";
  import Toastify from "toastify-js";
  import {
    ImportService,
    RunnerTeamService,
    RunnerOrganizationService,
  } from "@odit/lfk-client-js";
  import { createEventDispatcher } from "svelte";
  import Select from "svelte-select";
  export let opened_from;
  export let passed_org;
  export let passed_orgs;
  export let passed_team;
  export let current_runners;
  export let import_modal_open;
  $: searchvalue = "";
  $: importButtonEnabled =
    recent_processed &&
    (!(selected_org_or_team == "" || selected_org_or_team == null) ||
      !(passed_org?.id == null || passed_org?.id == 0) ||
      !(passed_team?.id == null || passed_team?.id == 0));
  const dispatch = createEventDispatcher();
  function cancelModal() {
    json_output = [];
    import_modal_open = false;
    dispatch("cancel");
  }
  (() => {
    document.onkeydown = (e) => {
      e = e || window.event;
      if (e.key === "Escape") {
        cancelModal();
      }
      if (e.keyCode === 13) {
        //
      }
    };
  })();
  let groups = [];
  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
    const orgs = val.map((r) => {
      return { label: r.name, value: `ORG_${r.id}` };
    });
    groups = groups.concat(orgs);
    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
      const teams = val.map((r) => {
        return {
          label: `${r.parentGroup.name} > ${r.name}`,
          value: `TEAM_${r.id}`,
        };
      });
      groups = groups.concat(teams);
    });
  });
  let selected_org;
  $: selected_org_or_team = "";
  let files;
  let recent_processed = true;
  $: json_output = [];
  $: {
    if (files) {
      if (
        files[0].type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        const reader = new FileReader();
        reader.addEventListener("load", async (e) => {
          const data = new Uint8Array(e.target.result);
          const out = readXlsx(data, { type: "array" });
          json_output = xlsx_utils.sheet_to_json(
            out.Sheets[Object.keys(out.Sheets)[0]]
          );
        });
        reader.readAsArrayBuffer(files[0]);
      } else {
        const reader = new FileReader();
        reader.addEventListener("load", async (e) => {
          json_output = await csv({
            delimiter: [";", ","],
            trim: true,
          }).fromString(e.target.result);
        });
        reader.readAsText(files[0]);
      }
    }
  }
  function importAction() {
    if (recent_processed === true) {
      const toast = Toastify({
        text: $_("runners-are-being-imported"),
        duration: -1,
      }).showToast();
      recent_processed = false;
      const mapped = json_output.map(function (runner) {
        return {
          firstname: runner[`${$_("csv_import__firstname")}`],
          middlename: runner[`${$_("csv_import__middlename")}`],
          lastname: runner[`${$_("csv_import__lastname")}`],
          team:
            runner[`${$_("csv_import__team")}`] ||
            runner[`${$_("csv_import__class")}`],
        };
      });
      let org = 0;
      if (opened_from === "OrgDetail") {
        org = passed_org.id;
      }
      if (opened_from === "OrgOverview") {
        org = parseInt(selected_org);
      }
      if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
        ImportService.importControllerPostOrgsJson(org, mapped)
          .then((resp) => {
            toast.hideToast();
            recent_processed = true;
            Toastify({
              text: $_("import-finished"),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            cancelModal();
          })
          .catch((err) => {
            toast.hideToast();
            recent_processed = true;
            Toastify({
              text: $_("error-during-import"),
              duration: 500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
            cancelModal();
          });
      }
      if (opened_from === "TeamDetail") {
        ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
          .then((resp) => {
            toast.hideToast();
            recent_processed = true;
            Toastify({
              text: $_("import-finished"),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
            cancelModal();
          })
          .catch((err) => {
            toast.hideToast();
            recent_processed = true;
            Toastify({
              text: $_("error-during-import"),
              duration: 500,
              backgroundColor:
                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
            }).showToast();
            cancelModal();
          });
      }
      if (opened_from === "RunnerOverview") {
        if (selected_org_or_team.includes("ORG_")) {
          selected_org_or_team = selected_org_or_team.split("_")[1];
          ImportService.importControllerPostOrgsJson(
            selected_org_or_team,
            mapped
          )
            .then((resp) => {
              current_runners = current_runners.concat(resp);
              toast.hideToast();
              recent_processed = true;
              Toastify({
                text: $_("import-finished"),
                duration: 500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
              cancelModal();
            })
            .catch((err) => {
              toast.hideToast();
              recent_processed = true;
              Toastify({
                text: $_("error-during-import"),
                duration: 500,
                backgroundColor:
                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
              }).showToast();
              cancelModal();
            });
        }
        if (selected_org_or_team.includes("TEAM_")) {
          selected_org_or_team = selected_org_or_team.split("_")[1];
          ImportService.importControllerPostTeamsJson(
            selected_org_or_team,
            mapped
          )
            .then((resp) => {
              current_runners = current_runners.concat(resp);
              toast.hideToast();
              recent_processed = true;
              Toastify({
                text: $_('import-finished'),
                duration: 500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
              cancelModal();
            })
            .catch((err) => {
              toast.hideToast();
              recent_processed = true;
              Toastify({
                text: $_("error-during-import"),
                duration: 500,
                backgroundColor:
                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
              }).showToast();
              cancelModal();
            });
        }
      }
    }
  }
</script>

{#if import_modal_open}
  <div
    class="fixed z-10 inset-0 overflow-y-auto"
    use:focusTrap
    use:clickOutside
    on:click_outside={() => {
      cancelModal();
    }}>
    <div
      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div
          class="absolute inset-0 bg-gray-500 opacity-75"
          data-id="modal_backdrop" />
      </div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true">&#8203;</span>
      <div
        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="h-6 w-6 text-blue-600"
                fill="currentColor"
                width="24"
                height="24"><path fill="none" d="M0 0h24v24H0z" />
                <path
                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
              <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
                {$_('runner-import')}
              </h3>
            </div>
          </div>
          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
            {#if json_output.length === 0}
              <div class="mt-2 mb-6">
                <p class="text-sm text-gray-500">
                  {$_('please-provide-the-required-csv-xlsx-file')}
                </p>
              </div>
              <div class="overflow-hidden relative mt-4 mb-4">
                <input
                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                  bind:files
                  type="file" />
              </div>
              <div class="overflow-hidden relative mt-4 mb-4">
                <button
                  on:click={() => {
                    cancelModal();
                  }}
                  type="button"
                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm">
                  {$_('cancel')}
                </button>
              </div>
            {/if}
            {#if json_output.length > 0}
              {#if opened_from === 'OrgOverview'}
                <p>{$_('import__target-organization')}</p>
                <select
                  name="team"
                  bind:value={selected_org}
                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
                  {#each passed_orgs as o}
                    <option value={o.id}>{o.name}</option>
                  {/each}
                </select>
                <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
              {/if}
              {#if opened_from === 'RunnerOverview'}
                <p>{$_('group')}</p>
                <Select
                  containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
                  itemFilter={(label, filterText, option) => label
                      .toLowerCase()
                      .includes(
                        filterText.toLowerCase()
                      ) || option.id.value
                      .toString()
                      .startsWith(filterText.toLowerCase())}
                  items={groups}
                  showChevron={true}
                  placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
                  noOptionsMessage={$_('no-organization-or-team-found')}
                  on:select={(selectedValue) => {
                    selected_org_or_team = selectedValue.detail.value;
                  }}
                  on:clear={() => (selected_org_or_team = null)} />
              {/if}
              {#if opened_from === 'OrgDetail'}
                <p>
                  {$_('runnerimport_verify_runners_org', {
                    values: { org_name: passed_org.name },
                  })}
                </p>
              {/if}
              <input
                type="search"
                bind:value={searchvalue}
                placeholder={$_('datatable.search')}
                aria-label={$_('datatable.search')}
                class="p-2 w-full" />
              <div class="relative w-full mt-4 mb-4">
                <div class="w-full overflow-x-auto">
                  <table class="divide-y divide-gray-200 w-full">
                    <thead class="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          {$_('csv_import__firstname')}
                        </th>
                        <th
                          scope="col"
                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          {$_('csv_import__middlename')}
                        </th>
                        <th
                          scope="col"
                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          {$_('csv_import__lastname')}
                        </th>
                        {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
                          <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {$_('csv_import__team')}
                          </th>
                        {/if}
                      </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                      {#each json_output as runner}
                        {#if Object.values(runner)
                          .toString()
                          .toLowerCase()
                          .includes(searchvalue)}
                          <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                              {runner[`${$_('csv_import__firstname')}`]}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                              {runner[`${$_('csv_import__middlename')}`] || ''}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                              {runner[`${$_('csv_import__lastname')}`]}
                            </td>
                            {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
                              <td class="px-6 py-4 whitespace-nowrap">
                                {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
                              </td>
                            {/if}
                          </tr>
                        {/if}
                      {/each}
                    </tbody>
                  </table>
                </div>
                <button
                  disabled={!importButtonEnabled}
                  class:opacity-50={!importButtonEnabled}
                  on:click={importAction}
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                  {$_('import-runners')}
                </button>
                <button
                  on:click={() => {
                    cancelModal();
                  }}
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                  {$_('cancel')}
                </button>
              </div>
            {/if}
          </div>
        </div>
      </div>
    </div>
  </div>
{/if}
