<script>
  import { makePost } from "$lib/tools/requests/requests";
  import { sayError, sayInfo, sayWarning } from "$lib/tools/toaster/Toaster";
  import { onMount } from "svelte";
  import { checkAuth, saveAuthInfo } from "$lib/auth/Auth";
  import { redirect } from "$lib/tools/url/URLTools";
  import { AuthStorage } from "$lib/tools/storages/auth-storage";

  //6da8a96a-7253-45e2-a3c1-e00d5ecdc65d - valid
  let tokenValid = true;
  let totpValid = true;
  let showLoadingSpinner = false;

  let input_token = null;
  let input_totp = null;
  async function sendLogin() {
    if (input_token.value === "" || input_totp.value === "") {
      sayError("Заполните все поля!");
      tokenValid = input_token.value !== "";
      totpValid = input_totp.value !== "";
      return;
    } else {
      tokenValid = true;
      totpValid = true;
      showLoadingSpinner = true;
      const result = await makePost("client/login", {
        user_token: input_token.value,
        totp: input_totp.value,
      });
      if (result.error) {
        sayError("Ошибка входа!");
        tokenValid = false;
        totpValid = false;
        showLoadingSpinner = false;
        return;
      } else {
        saveAuthInfo(result.data.token);
        AuthStorage.update((s) => {
          s.logged = true;
        });
        redirect("/admin/");
        showLoadingSpinner = false;
        return;
      }
    }
  }

  // let checkAuthInProgress = true;
  // onMount(async () => {
  //   let result = await checkAuth();
  //   if (result && window.location.pathname === "/login") {
  //       window.location.href = "/";
  //   }
  //   else
  //   checkAuthInProgress = false;
  // });
</script>

<div class="w-full h-full flex items-center justify-center">
  <div
    class="bg-base-300 w-full h-full max-w-[500px] max-h-[300px] flex flex-col justify-center gap-2 p-4 rounded-box"
  >
    <h1 class="text-4xl self-center mb-4">Вход</h1>
    <label
      class={"input input-bordered flex items-center gap-2 " +
        (tokenValid ? "input-warning" : "input-error")}
    >
      Токен:
      <input
        bind:this={input_token}
        type="text"
        class="grow text-lg text-info"
      />
    </label>
    <label
      class={"input input-bordered flex items-center gap-2 " +
        (totpValid ? "input-warning" : "input-error")}
    >
      2FA Код:
      <input
        bind:this={input_totp}
        type="text"
        class="grow text-lg text-info"
      />
    </label>
    <!-- <button class="btn-link btn max-w-[140px] self-center">У меня нет 2FA</button> -->
    <button
      on:click={() => {
        sendLogin();
      }}
      class="btn btn-primary text-lg"
    >
      Войти
      {#if showLoadingSpinner}
        <svg
          class="animate-spin -ml-1 mr-3 h-5 w-5 text-black"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            class="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
          ></circle>
          <path
            class="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          ></path>
        </svg>
      {/if}
    </button>
  </div>
</div>
