<script>
  import { _, time } from "svelte-i18n";
  import {
    RunnerCardService,
    RunnerService,
    ScanService,
    ScanStationService,
    TrackService,
  } from "@odit/lfk-client-js";
  import QrCodeScanner from "./QrCodeScanner.svelte";
  import { onMount } from "svelte";
  import Select from "svelte-select";
  let state = "scan_card";
  let scaninfo = {
    lapTime: 0,
    track: "",
    distance: null,
    valid: false,
    id: 0,
    runner: {
      id: 0,
      firstname: "",
      lastname: "",
      distance: 0,
    },
  };
  let cardCode = "";
  let scannerActive = false;
  let barcodeInput;
  let stations = [];
  let selectedStation = null;

  function resetAll() {
    state = "scan_card";
    scaninfo = {
      lapTime: 0,
      track: "",
      distance: null,
      valid: false,
      id: 0,
      runner: {
        id: 0,
        firstname: "",
        lastname: "",
        distance: 0,
      },
    };
    cardCode = "";
    scannerActive = true;
    setTimeout(() => {
      barcodeInput && barcodeInput.focus();
    }, 100);
  }

  onMount(() => {
    if (barcodeInput) {
      barcodeInput.focus();
    }
    ScanStationService.scanStationControllerGetAll()
      .then((data) => {
        stations = data.map((val) => {
          return {
            label: val.description,
            value: val,
          };
        });
        scannerActive = true;
      })
      .catch(() => {
        stations = [];
      });
  });

  function handleInput(input) {
    ScanService.scanControllerPostTrackScans({
      card: parseInt(input),
      station: selectedStation,
    })
      .then((data) => {
        scaninfo = data;
        if (scaninfo.valid) {
          new Audio("/beep.mp3").play();
          state = "scan_card";
        } else {
          state = "error_invalid";
          new Audio("/error.mp3").play();
        }
      })
      .catch((err) => {
        console.error(err);
        state = "error_card";
        new Audio("/error.mp3").play();
      });
  }
</script>

<div class="p-4">
  <h3 class="text-3xl font-bold">{$_("mobile-scanclient")}</h3>
  <Select
    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
    items={stations}
    showChevron={true}
    placeholder={$_("search-for-track")}
    noOptionsMessage={$_("no-tracks-found")}
    on:select={(selectedValue) => {
      selectedStation = selectedValue.detail.value.id;
      setTimeout(() => {
        barcodeInput && barcodeInput.focus();
      }, 100);
    }}
    on:clear={() => (selectedStation = null)}
  />
  {#if state === "error_card"}
    <div class="text-center mx-auto">
      <svg
        class="h-64 mx-auto"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 500 500"
        ><path
          d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
          style="fill:#407bff"
        /><path
          d="M298.37 335.5C382 299.85 469.46 233.1 432.31 135 398.6 46 284.74 25.75 219.62 102.47c-28.09 33.09-23.18 77.05-57.16 106.51s-90.4 45.83-75.13 104c23.67 89.93 156 46.02 211.04 22.52Z"
          style="fill:#fff;opacity:.9"
        /><path
          d="M360.6 263.05h-.36c-26.64-2.18-45-25-45.74-25.92a4.47 4.47 0 0 1 7-5.55c.21.27 15.9 19.61 37.63 22.37 7-7 13-25.48 12.33-31.07v-.16c-.14-1.8-.48-8 1.29-11.65a4.47 4.47 0 0 1 8 3.88c-.44.92-.65 4.23-.44 7 1 9.2-7 32.42-17 40.19a4.47 4.47 0 0 1-2.71.91ZM148.82 238.82a65.8 65.8 0 0 1-48.56-22.28 4.46 4.46 0 0 1-.26-5.64c7.22-9.71 20-32.64 22-40.11a10.91 10.91 0 0 0-4.14-4.33 4.45 4.45 0 0 1-2.55-3.61l-.72-7.32a4.47 4.47 0 0 1 8.89-.88l.5 5.09a22.34 22.34 0 0 1 6.81 8.65 4.48 4.48 0 0 1 .32 2.26c-.92 7.93-13.79 30.9-21.71 42.51 18.49 18.43 40.59 16.75 41.56 16.66a4.47 4.47 0 0 1 .82 8.9c-.26.02-1.29.1-2.96.1ZM292.87 416.09h-12a4.47 4.47 0 0 1-4.31-5.66c3.13-11.24 4.67-20.39 5.82-34.71-4.24-20-8.23-38.21-8.27-38.39a4.47 4.47 0 0 1 8.73-1.91c0 .18 4.12 18.86 8.41 39.08a4.23 4.23 0 0 1 .08 1.28c-1 12.86-2.31 21.75-4.67 31.38h6.18a4.47 4.47 0 0 1 0 8.93ZM200.32 416.09h-6.76a4.45 4.45 0 0 1-4.42-5.08c1.15-8.2 7-23.13 13.3-38.14 2.23-19.8 4.05-36.8 4.07-37a4.47 4.47 0 1 1 8.88 1c0 .17-1.88 17.56-4.15 37.65a4.31 4.31 0 0 1-.32 1.22c-4.43 10.63-9.49 23.15-11.8 31.44h1.2a4.47 4.47 0 1 1 0 8.93Z"
          style="fill:#263238"
        /><path
          d="m204.21 111-52.06 52.07c-2.62 57.71-2.41 118.33 0 181.18h172.16c-3.41-81.1-3.73-159.17 0-233.25Z"
          style="fill:#fff"
        /><path
          d="M324.31 345.13H152.15a.9.9 0 0 1-.9-.86c-2.49-65.27-2.49-126.27 0-181.27a.9.9 0 0 1 .27-.59l52.06-52.07a.89.89 0 0 1 .63-.26h120.1a.9.9 0 0 1 .65.28.87.87 0 0 1 .24.66c-3.59 71.34-3.59 147.61 0 233.17a.89.89 0 0 1-.25.65.86.86 0 0 1-.64.29ZM153 343.34h170.38c-3.54-84.86-3.55-160.59 0-231.47h-118.8L153 163.43c-2.45 54.64-2.45 115.16 0 179.91Z"
          style="fill:#263238"
        /><path
          d="M214.28 219.19c-.2-4.36-2.67-7.8-5.53-7.7s-5 3.71-4.82 8.07 2.67 7.8 5.53 7.69 5.02-3.71 4.82-8.06ZM274.65 217.82c-.2-4.35-2.67-7.79-5.53-7.69s-5 3.71-4.82 8.07 2.68 7.8 5.53 7.69 5.02-3.71 4.82-8.07ZM229.35 237a36.55 36.55 0 0 1 28.63 1.3 1.27 1.27 0 0 1 .49 1.74 1.3 1.3 0 0 1-1.75.49c-.15-.08-14.4-7.76-31.41 1a1.31 1.31 0 0 1-1.74-.54 1.27 1.27 0 0 1 .55-1.72 41.73 41.73 0 0 1 5.23-2.27ZM205.64 178.34a2.64 2.64 0 0 1 1.26.36 2.58 2.58 0 0 1 .92 3.51A25.29 25.29 0 0 1 188.27 195a2.59 2.59 0 0 1-2.69-2.45 2.55 2.55 0 0 1 2.44-2.66c.39 0 9.62-.58 15.36-10.27a2.52 2.52 0 0 1 2.26-1.28ZM266.05 176.87a2.57 2.57 0 0 1 2.33.72c8 8 17.14 6.39 17.52 6.32a2.6 2.6 0 0 1 3 2 2.54 2.54 0 0 1-2 3c-.5.09-12.14 2.31-22.21-7.75a2.54 2.54 0 0 1 1.31-4.3Z"
          style="fill:#407bff"
        /><path
          d="m321.72 204.86-7.31.68a5.22 5.22 0 0 1-5.58-4.06L298.7 156.1a5.22 5.22 0 0 1 3.77-6.18l19.59-5.14ZM209 167.69c-5.09-13.89-10.18-36.12-4.81-56.71l-52.06 52.07c14.73 4.95 38.19 7.06 56.87 4.64Z"
          style="opacity:.2"
        /><path
          d="M204.21 163.05c-5.71-16.86-3.38-39.78 0-52.07l-52.06 52.07c15.76 2.87 33.37 2.41 52.06 0Z"
          style="fill:#fff"
        /><path
          d="M176 165.92a133.14 133.14 0 0 1-24-2 .88.88 0 0 1-.47-1.5l52.06-52.07a.89.89 0 0 1 1.49.87c-3.14 11.44-5.75 34.6 0 51.54a.93.93 0 0 1-.09.76.87.87 0 0 1-.64.41 221.85 221.85 0 0 1-28.35 1.99Zm-22-3.46c13.84 2.29 29.91 2.24 49-.16-4.71-14.94-3.64-34.71-.48-48.4Z"
          style="fill:#263238"
        /></svg
      >
      <p class="text-lg font-semibold">{$_("card_not_found")}</p>
      <button
        on:click={() => {
          resetAll();
        }}
        type="button"
        class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
      >
        {$_("try_again")}
      </button>
    </div>
  {:else if state === "error_invalid"}
    <div class="text-center mx-auto">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-64 h-64 text-center mx-auto text-red-600 mt-2"
        viewBox="5.25 5.25 13.5 13.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
      <p class="text-lg font-semibold">{$_("invalid-scan")}</p>
      <button
        on:click={() => {
          resetAll();
        }}
        type="button"
        class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 mt-2"
      >
        {$_("try_again")}
      </button>
    </div>
  {:else}
    <p>
      <b>{$_("runner")}:</b>
      {scaninfo.runner?.firstname}
      {scaninfo.runner?.lastname}
    </p>
    <p>
      <b>{$_("laptime")}:</b>
      {Math.floor(scaninfo.lapTime / 60) +
        "min " +
        (Math.floor(scaninfo.lapTime % 60) + "").padStart(2, "0") +
        "s"}
    </p>
    <p>
      <b>{$_('total-distance')}:</b>
      {Math.floor(scaninfo.runner.distance / 1000) +
									"km " +
									(
										Math.floor(scaninfo.runner.distance % 1000) + ""
									).padStart(3, "0") +
									"m"}
    </p>
    <!--  -->
  {/if}
  {#if state.includes("scan_")}
    {#if scannerActive}
      <QrCodeScanner
        :paused={!scannerActive}
        on:detect={(e) => {
          if (scannerActive) {
            if (`${e.detail.decodedText}`.length === 13) {
              e.detail.decodedText = e.detail.decodedText.substring(
                0,
                e.detail.decodedText.length - 1
              );
            }
            console.log({ type: "DETECT", code: e.detail.decodedText });
            handleInput(e.detail.decodedText);
          }
        }}
        width={320}
        height={320}
        class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
      />
      <form
        on:submit={(e) => {
          handleInput(barcodeInput.value);
          barcodeInput.value = "";
          e.preventDefault();
        }}
        class="mt-2"
      >
        <input
          type="text"
          placeholder={$_("barcode_scanner")}
          class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden mt-2"
          bind:this={barcodeInput}
        />
      </form>
    {/if}
    <!--  -->
  {/if}
</div>
